Hexo手动添加PWA

9月 1 2023 教程 4 分钟读完 (约 604 字)

不要再装那些Hexo的PWA插件了。

为Hexo博客添加PWA支持，主要分两部分：

准备manifest

制作图标

制作各种大小的图标并存放在source/images/icons下。

新增manifest.json

在hexo的source目录下添加一个manifest.json，内容类似：

{
   
       "name": "mykonakona",
       "short_name": "mykonakona",
       "theme_color": "#222f3e",
       "background_color": "#18222d",
       "display": "standalone",
       "scope": "/",
       "start_url": "/",
       "icons": [
           {
            "src": "/images/icons/icon-48x48.png",
            "sizes": "48x48",
            "type": "image/png",
            "purpose": "any maskable"
            },
           ...
            {
            "src": "/images/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
            }
        ]
   
}

图标与json也可以通过类似PWA Application Icon Generator Free Online Tool的在线工具生成。

修改<head>标签

修改所用hexo主题的模板文件，在head.ejs添加：
1
2
<meta name="theme-color" content="#222f3e"/>
<link rel="manifest" href="/manifest.json">
这里theme-color的content值与manifest.json内的值相同。

准备Service Worker

新增service-worker.js

在hexo的source目录下新建一个sw.js文件（需要将正则处的mykonakona.github.io替换为自己的网址）：

importScripts('https://cdnjs.cloudflare.com/ajax/libs/workbox-sw/7.0.0/workbox-sw.js');

if (workbox) {

    workbox.precaching.precache(['/', '/index.html']);
    
    workbox.routing.registerRoute(new RegExp('^https?://mykonakona.github.io/?$'), new workbox.strategies.NetworkFirst());
    
    workbox.routing.registerRoute(new RegExp('.*.html'), new workbox.strategies.NetworkFirst());
    
    workbox.routing.registerRoute(new RegExp('.*.(?:js|css|jpg|png|gif)'), new workbox.strategies.StaleWhileRevalidate());
}

NetworkFirst()与StaleWhileRevalidate()的使用，可参考workbox的相关文档与教程。

注册service-worker

修改所用hexo主题的模板文件，在footer后的style.ejs添加注册service-worker的代码段：

<script>
    if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/sw.js');
   }
</script>

设置不渲染

在hexo的_config.yml里，设置不渲染manifiest.json及sw.js：
1
2
3
skip_render:
- manifest.json
- sw.js

小结

PWA其实用处不大，添加这个主要是为了跑Lighthouse分。过程中意识到Hexo确实用的人越来越少了：很多插件缺乏维护，照搬文档还不如手工添加。

硬着头皮补课，网上的sw.js例子调试时报错频频。发现是因为最新的workbox-sw.js里，函数命名从小驼峰式改成了大驼峰式。比如旧版本例子里的networkFist()如今都变成了NetworkFirst()。看来谷歌也要面对项目管理问题……

这个简单教程还是有一些前提的，比如PWA需要https支持等，这里不再赘述。

#静态博客 #Hexo #PWA #Service Worker