概要

概要

1. 配置 manifest.json

• 安装 hexo-pwa 插件
• 在 _config.yml 中添加 PWA 相关配置

2. 配置 Service Worker

• 创建并注册 sw.js
• 解决主题兼容性问题
• Aurora 主题特别配置

给 hexo 配置 PWA

前言

舍友要给他基于 hexo 的博客配置 PWA, 于是记录了这篇小教程.

manifest.json

首先是配置 manifest.json, 这需要用到一个叫 hexo-pwa 的库

npm

npm install hexo-pwa --save

pnpm

pnpm add hexo-pwa

然后在_config.yml 里加上

pwa:
  manifest:
    path: /manifest.json
    body:
      name: test blog
      short_name: test
      start_url: /
      display: standalone
      background_color: '#ffffff'
      theme_color: '#000000'
      icons:
        - src: /images/icons/icon-192x192.webp
          sizes: 192x192
          type: image/webp
        - src: /images/icons/icon-512x512.webp
          sizes: 512x512
          type: image/webp

这里准备好足够的图片, 是不是 webp 没什么所谓, 只是我刚好有这两张 webp 图片. 执行

hexo clean & hexo g & hexo server

没意外的话应该成功了, 如果没有成功检查一下图片路径以及 yml 缩进.

service worker

这个配置特别烦, 我弄了很久也没弄出来. 高版本 hexo 直接在_config.yml 加 serviceWorker 生成的时候会报错, 但是不报错的版本实在太低了, 于是决定使用别的办法. 既然无法使用插件, 那只能自己手动注册 sw 了. 这需要在 index.html 插入一份代码

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./sw.js')
        .then(function () {
            console.log('Service Worker 注册成功');
            });
        }
</script>

尝试使用一个叫hexo-inject的插件(ai给的插件, 事后翻hexo的插件列表没搜出来, 但是能安装)插入但是失败了, 看文档刚好有个injector的注入器, 干脆自己写了一个简单的插件.

hexo.extend.injector.register(
  'body_end',
  `<script>if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js').then(function () {console.log('Service Worker 注册成功');});}</script>`,
  'home'
)

相当简单的一个插件. 使用插件需要在node_modules创建一个文件夹, 名字以hexo-开头, 需要一个主js文件和一个package.json, 然后还要在根目录的package.json里加上你的插件, 具体怎么做可以查看hexo官方文档, 在这里 使用这个插件之后就能注册sw了. 接下来只要编写sw.js再放进source即可. 对于一些主题可能会出现sw.js被解析成页面(比如aurora), 这个需要在_config.yml里的skip_render修改

skip_render:
  - sw.js

这样就不会解析sw.js了, 具体的编写在此不描述, 下面是网上找的一个示例.

importScripts('https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js')

if (workbox) {
  workbox.setConfig({ modulePathPrefix: 'https://g.alicdn.com/kg/workbox/3.3.0/' })

  workbox.precaching.precache(['/', '/index.html'])

  workbox.routing.registerRoute(new RegExp('^https?://example.com/?$'), workbox.strategies.networkFirst())

  workbox.routing.registerRoute(new RegExp('.+html'), workbox.strategies.networkFirst())

  workbox.routing.registerRoute(new RegExp('.+(?:js|css|jpg|png|gif)'), workbox.strategies.staleWhileRevalidate())
}

他这个用了workbox来管理缓存策略, 基本上照着这个改就没有问题.

aurora配置service worker

舍友用的就是这个主题, 出现了sw.js被认为是页面并解析的情况. 这个就需要改一下skip_render了. 使用aurora有一个方便的地方就是不需要使用插件来注入script标签, 他自带有inject功能. 在_config.aurora.yml里修改：

injects:
  scripts:
    - <script>if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js').then(function () {console.log('Service Worker 注册成功');});}</script>
  css:

可能其它主题也有类似的功能, 具体可以查看主题的文档, 实在不行就只能用插件注入了. 翻了一下hexo的插件列表, 还有其它插件可以使用, 可能我看的hexo教程都太老了吧, 都说用hexo-pwa.