前言

Progressive Web App, 简称PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。

PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性能和体验三个方面都有很大提升,PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,兼具 Web App 和 Native App 的优点。

PWA 的主要特点包括下面三点:

  • 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现
  • 体验 - 快速响应,并且有平滑的动画响应用户的操作
  • 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面

PWA 本身强调渐进式,并不要求一次性达到安全、性能和体验上的所有要求,开发者可以通过 PWA Checklist 查看现有的特征。

开始pwa之前,全站必须支持HTTPS
开始pwa之前,全站必须支持HTTPS
开始pwa之前,全站必须支持HTTPS

安装pwa

hexo@4.2.0 目前赞不兼容 hexo-pwa,使用 hexo@4.2.0 版本的用户推荐降级到 hexo@4.1.1

  1. 使用sudo hexo -version 查看版本
  2. 安装指定版本 sudo npm install hexo@4.1.1 --save
  3. 安装hexo-pwa
1
sudo npm install hexo-pwa --save

配置

添加manifest.json

manifest.json生成网站生成manifest.json
首先你需要准备一个你喜欢的图标,填写香相关选项,并上传图标,将生成的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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
{
"name": "YH's Blog",
"short_name": "YH's Blog",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "standalone",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}

参数解释

  • name: {string} 应用名称,用于安装横幅、启动画面显示
  • short_name: {string} 应用短名称,用于主屏幕显示
  • theme_color: {Color} css色值theme_color 属性可以指定 PWA 的主题颜色。可以通过该属性来控制浏览器 UI 的颜色。比如 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色,会被 theme_color 所影响。
  • background_color: {Color} css色值 可以指定启动画面的背景颜色。
  • display: {string} 显示类型
  • fullscreen 应用的显示界面将占满整个屏幕
  • standalone 浏览器相关UI(如导航栏、工具栏等)将会被隐藏
  • minimal-ui 显示形式与standalone类似,浏览器相关UI会最小化为一个按钮,不同浏览器在实现上略有不同
  • browser 浏览器模式,与普通网页在浏览器中打开的显示一致
  • scope: {string} 作用域

scope 应遵循如下规则:
如果没有在 manifest 中设置 scope,则默认的作用域为 manifest.json 所在文件夹;
scope 可以设置为 …/ 或者更高层级的路径来扩大PWA的作用域;

  • start_url 必须在作用域范围内;

如果 start_url 为相对地址,其根路径受 scope 所影响;
如果 start_url 为绝对地址(以 / 开头),则该地址将永远以 / 作为根地址;

  • start_url: {string} 应用启动地址
  • icons: {Array.} 应用图标列表
  • src: {string} 图标 url

sizes {string} 图标尺寸,格式为widthxheight,宽高数值以 css 的 px 为单位。如果需要填写多个尺寸,则使用空格进行间隔,如”48x48 96x96 128x128”
type {string} 图标的 mime 类型,非必填项,该字段可让浏览器快速忽略掉不支持的图标类型

添加sw.js

新建一个名为sw.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?://gyh.im/?$'), 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());

}

将其中域名改为你自己主页的域名:https?://gyh.im/ 改为你的域名,格式要和我的一样。

配置站点配置文件

首先将生成的images文件复制到 /source 文件夹下
将下面的配置代码复制到你的站点根目录配置文件 _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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
# https://github.com/lavas-project/hexo-pwa
pwa:
manifest:
path: /manifest.json
body:
name: YH's Blog
short_name: YH's Blog
theme_color: #2196f3
background_color: #2196f3
display: standalone
orientation: portrait
scope: /
start_url: /
icons:
- src: /images/icons/icon-72x72.png
type: image/png
sizes: 72x72
- src: /images/icons/icon-96x96.png
type: image/png
sizes: 96x96
- src: /images/icons/icon-128x128.png
type: image/png
sizes: 128x128
- src: /images/icons/icon-144x144.png
type: image/png
sizes: 144x144
- src: /images/icons/icon-152x152.png
type: image/png
sizes: 152x152
- src: /images/icons/icon-192x192.png
type: image/png
sizes: 192x192
- src: /images/icons/icon-384x384.png
type: image/png
sizes: 384x384
- src: /images/icons/icon-512x512.png
type: image/png
sizes: 512x512
serviceWorker:
path: /sw.js
preload:
urls:
- /
posts: 12
opts:
networkTimeoutSeconds: 30
routes:
- pattern: !!js/regexp /hm.baidu.com/
strategy: networkOnly
- pattern: !!js/regexp /www.google-analytics.com/
strategy: networkOnly
- pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
strategy: cacheFirst
- pattern: !!js/regexp /\//
strategy: networkFirst
priority: 5

检查pwa部署是否成功

执行hexo clean && hexo g && hexo s

然后在浏览器输入localhost:4000,查看效果。

按F12,然后选择Application—>Service Workers,查看是否成功?

成功状态提示:Status #xxx activated and is running

谷歌浏览器安装PWA

前面的步骤操作没错,配置也没问题,则在本地运行试,浏览器地址栏中会出现一个类似 ➕ 加号的图标,点击它会出现一个弹出框,就说明配置成功,当然你可以选择安装,安装过后桌面会出现一个图标,点击就可以访问,但是如果你本地服务关闭的话,再点击这个图标,有些页面可以访问,但有些页面访问不了。如果需要它都能够全部访问的话,你需要开启本地服务,也就是hexo s

如果你的地址栏没有出现这个加号,首先在新的标签页上的地址栏输入Chrome://flags,然后再搜索栏输入PWAS进行查找,会出现两个选项一个为Desktop PWAs local updating,另一个为Desktop PWAs installable from the omnibox,将其设为Enabled,然后点击Relaunch,进行浏览器的重启,再查看localhost:4000,就会出现加号了。

部署到github和coding

1
2
3
sudo hexo clean
sudo hexo g
sudo hexo d

参考资料