HEXO 支持 PWA 桌面应用

安装 npm 模块

1	npm install hexo-offline 或者 yarn add hexo-offline

配置 _config.yml

在 _config.yml 中加入 PWA 的配置，以使开启站点编译支持。

# Offline
## Config passed to sw-precache
## https://github.com/JLHwung/hexo-offline
offline:
  maximumFileSizeToCacheInBytes: 10485760
  staticFileGlobs:
    - public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,json,xml}
  stripPrefix: public
  verbose: true
  runtimeCaching:
    # CDNs - should be cacheFirst, since they should be used specific versions so should not change
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdnjs.cloudflare.com

配置 melody.yml

在主题配置文件中开启 pwa 支持，使得主题在编译的时候启用 pwa 选项。

1
2
3

pwa:
  enable: true
  manifest: /manifest.json

生成 PWA 的配置文件 manifest.json

在 App Manifest Generator 配置好自己网页要生成 PWA 的应用的格式，例如主题背景颜色图标等等。

本站点的 manifest 配置：

{
    "name": "Case of Xeon",
    "short_name": "SmallXeon",
    "theme_color": "#2196f3",
    "background_color": "#b1ddff",
    "display": "fullscreen",
    "scope": "/",
    "start_url": "/index.html",
    "icons": [
        {
          "src": "img/icon/idpi.png",
          "sizes": "36x36",
          "type": "image/png"
        },
        {
          "src": "img/icon/mdpi.png",
          "sizes": "48x48",
          "type": "image/png"
        },
        {
          "src": "img/icon/xhdpi.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "img/icon/xxhdpi.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": "img/icon/xxxhdpi.png",
          "sizes": "192x192",
          "type": "image/png"
        }
      ]
  }

可以很清楚的看到，站点名称，站点短名等等，都是可以设置的。

而有一点比较有意思，就是 display 模式的选择：

显示类型	描述	降级显示类型
fullscreen	应用的显示界面将占满整个屏幕	standalone
standalone	浏览器相关UI（如导航栏、工具栏等）将会被隐藏	minimal-ui
minimal-ui	显示形式与standalone类似，浏览器相关UI会最小化为一个按钮，不同浏览器在实现上略有不同	browser
browser	浏览器模式，与普通网页在浏览器中打开的显示一致	(None)

要根据自己的需求来选择 display 的现实模式，我想就让博客像一个应用一样打开像一个全屏化的 APP，所以就选了fullscreen。

最后将配置好的 manifest.json 拷贝下来放到 hexo 的 source 目录下，就大功告成了！

配置图标

在看到 manifest.json 的内容之后，估计也能看出来图标是怎么配置的了。

就贴几个好用的在线工具，可以直接生成不同大小的图标。

1：1图片生成不同尺寸的 app 图标，格式为 png。需要使用特殊的上网方式才能顺利上去。resizeappicon.com - Web-based icon resizer for iOS and Android

典型的 SVG 图标网页，直接可以下载或者拷贝 svg 信息。simpleicons

svg在线解析。URL-encoder for SVG

png 转 ico。此外还有很多转换功能。aconvert

明天也要加油~