想要实践一下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选项
- 地址栏输入: Chrome://flags
- 启用以下项目: Desktop PWAs(桌面PWAs)、App Banners(应用横幅)、Experimental App Banners(实验性应用横幅)
- 重启浏览器
这样点击地址栏旁的工具栏下可以看到”创建快捷方式…“这个选项了。
此外,F12打开chrome调试工具,可以看到一些文件是from service worker,这样表示service worker注册成功了。
点击network,可以选择offline选项模拟离线环境。
其他
用hexo-offline插件也可以实现pwa
手机上浏览器也使用chrome,可以看到弹出框“添加至主屏幕”
也可以点击工具栏添加到主屏幕
参考
Nginx+Https配置
hexo博客简单支持PWA
为Hexo添加简单的PWA支持