不要再装那些Hexo的PWA插件了。
为Hexo博客添加PWA支持,主要分两部分:
准备manifest
制作图标
- 制作各种大小的图标并存放在source/images/icons下。
新增manifest.json
在hexo的source目录下添加一个manifest.json,内容类似:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26{
"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替换为自己的网址):
1
2
3
4
5
6
7
8
9
10
11
12importScripts('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的代码段:
1
2
3
4
5<script>
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/sw.js');
}
</script>
设置不渲染
在hexo的_config.yml里,设置不渲染manifiest.json及sw.js:
1
2
3skip_render:
- manifest.json
- sw.js
小结
PWA其实用处不大,添加这个主要是为了跑Lighthouse分。过程中意识到Hexo确实用的人越来越少了:很多插件缺乏维护,照搬文档还不如手工添加。
硬着头皮补课,网上的sw.js例子调试时报错频频。发现是因为最新的workbox-sw.js里,函数命名从小驼峰式改成了大驼峰式。比如旧版本例子里的networkFist()如今都变成了NetworkFirst()。看来谷歌也要面对项目管理问题……
这个简单教程还是有一些前提的,比如PWA需要https支持等,这里不再赘述。