概要

配置 manifest.json

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

配置 Service Worker

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

给 hexo 配置 PWA

前言

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

manifest.json

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

npmpnpm

npm install hexo-pwa --save

pnpm add hexo-pwa

然后在_config.yml 里加上

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修改

yml

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里修改：

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.

概要 ​

给 hexo 配置 PWA ​

前言 ​

manifest.json ​

service worker ​

aurora配置service worker ​

概要

给 hexo 配置 PWA

前言

manifest.json

service worker

aurora配置service worker