Hexo博客配置PWA

Posted on 2018-12-17 |    

想要实践一下pwa,就拿自己的博客来试验一下。

配置https

想要实现网站的pwa,需要将网站配置成https,主要是因为service worker只能下https下,本地localhost和127.0.0.1也是可以的。

ssl证书

购买的腾讯云的服务器,可以免费申请ssl证书,申请完后,下载证书得到一个压缩文件。解压缩后有好几个目录,因为是nginx的环境,把nginx下的证书和key复制出来,放到服务器上的目录即可。

nginx配置https

编辑nginx.conf文件,添加如下配置,设置证书的路径,此外,将http重定向https,如果想要http和https同时使用,也可以不需要重定向和上面的add_header配置。

配置hexo pwa

安装hexo-pwa

1
2
3
npm hexo-pwa --save
//或
cnpm hexo-pwa --save

配置文件

在hexo博客根目录的.config.yml里添加如下配置

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
27
28
29
30
31
32
33
34
35
36
37
pwa:
manifest:
path: /manifest.json
body:
"name": "Syean"
"short_name": "Syean"
"theme_color": "#2a6cb1"
"background_color": "#ffffff"
"display": "standalone"
"Scope": "/"
"start_url": "/"
icons:
- src: img/icon_144.png
sizes: 144x144
type: image/png
- src: img/icon_128.png
sizes: 128x128
type: image/png
- src: img/icon_96.png
sizes: 96x96
type: image/png
serviceWorker:
path: /serviceworker.js
preload:
urls:
- /
posts: 5
opts:
networkTimeoutSeconds: 5
routes:
- pattern: !!js/regexp /hm.baidu.com/
strategy: networkOnly
- pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
strategy: cacheFirst
- pattern: !!js/regexp /\//
strategy: networkFirst
priority: 5

具体的配置项内容可以参考看mozilla文档

添加manifest和serviceworker文件

在根目录下添加manifest.json和serviceworker.js,或者其他目录也可以,与.config.yml的目录统一即可。
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": "Syean",
"short_name": "Syean",
"theme_color": "#2a6cb1",
"background_color": "#ffffff",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "img/icon_96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "img/icon_128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icon_144.png",
"sizes": "144x144",
"type": "image/png"
}
]
}

serviceworker.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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?://syean.cn/?$'), 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());

}

chrome 配置pwa选项

  1. 地址栏输入: Chrome://flags
  2. 启用以下项目: Desktop PWAs(桌面PWAs)、App Banners(应用横幅)、Experimental App Banners(实验性应用横幅)
  3. 重启浏览器

这样点击地址栏旁的工具栏下可以看到”创建快捷方式…“这个选项了。

此外,F12打开chrome调试工具,可以看到一些文件是from service worker,这样表示service worker注册成功了。
点击network,可以选择offline选项模拟离线环境。

其他

用hexo-offline插件也可以实现pwa
手机上浏览器也使用chrome,可以看到弹出框“添加至主屏幕”
也可以点击工具栏添加到主屏幕

参考

Nginx+Https配置
hexo博客简单支持PWA
为Hexo添加简单的PWA支持