为Hexo添加简单的PWA支持

Author Avatar
WSKa 3月 12, 2018
  • 在其它设备上阅读本文章

一句话前言: 实际上我想要的只是那个 “添加到屏幕” 功能.

插件选择

这里我使用了 hexo-pwa 插件. 类似的方案还有hexo-offline, 在这里不多叙述.

安装

npm install hexo-pwa --save

配置

有个详细的 README 真好, 默认情况下在config.yml里稍作修改就可以使用, 重复的内容我就不多说了.

稍作修改

但我的博客存放在子目录”/burogu”, 所以必须进行一些修改.
在”/node_modules/hexo-pwa/templates/swRegister.tpl.js” 中修改navigator.serviceWorker.register的数值:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/burogu/sw.js?t=1520811355218')
    .then(function () {console.log('ServiceWorker Register Successfully.')})
    .catch(function (e) {console.error(e)});
}

接下来在 “node_modules/hexo-pwa/index.js” 中修改let manifestHtml的数值:

function injectManifest(data) {
  let manifestHtml = `<head><link rel=manifest href="/burogu/manifest.json">`;

  if (data.indexOf(manifestHtml) === -1) {
    data = data.replace('<head>', manifestHtml);
  }

  return data;
}

现在已经可以从控制台看到ServiceWorker正常加载, 不过好像用这个会造成搜索结果url错误.
尝试了一下还是找不到解决方法, 暂且先这样吧 (反正几乎用不到搜索功能).

Manifest

默认生成的manifest.json信息很少, 这时候我就需要再修改一下了.
过了11天我终于用图标生成器生成了图标, 开始做接下来的部分.
直接在config.yml里配置:

  manifest:
    path: /manifest.json
    body:
      lang: zh-CN
      name: CRS' Burogu
      short_name: CRS' Burogu
      description: Unknown Corner.
      start_url: /burogu
      scope: /burogu
      background-color: '#fff'
      theme_color: '#2196f3'
      display: standalone
      icons:
        - src: /img/icon/app_48.png
          sizes: 48x48
          type: image/png
        - src: /img/icon/app_72.png
          sizes: 72x72
          type: image/png
        - src: /img/icon/app_96.png
          sizes: 96x96
          type: image/png
        - src: /img/icon/app_144.png
          sizes: 144x144
          type: image/png
        - src: /img/icon/app_192.png
          sizes: 192x192
          type: image/png
        - src: /img/icon/app_512.png
          sizes: 512x512
          type: image/png

出于懒惰我就不一个个说那是什么设置了, 想了解的话可以去阅读mozilla的文档.

首次打开网站弹出添加PWA提示

最重要的部分来了!
我在/layout/_partial/import_js.ejs (这玩意每个主题都不同)里加入了这么一段代码:

<script>
window.addEventListener('beforeinstallprompt', event => {
  event.userChoice.then(result => {console.log(result.outcome)
  })
})
</script>

然后测试效果:

         

本文作者: WSKaCrs
本文采用CC BY 4.0协议进行许可, 阅读 相关说明.

页面链接: https://crs.mainstars.net/burogu/post/hexo-pwa/