准备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添加：
```
<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：
```
skip_render:
 - manifest.json
 - sw.js
```

小结

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

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

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