Hexo添加PWA支持
PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。 —来自百度百科
Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。
PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。
PWA 的主要特点包括下面三点：
- 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现
- 体验 - 快速响应，并且有平滑的动画响应用户的操作
- 粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面
PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过 PWA Checklist 查看现有的特征。
推荐阅读：https://lavas.baidu.com/pwa/README
可以了解一下什么是PWA
开始操作
注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件
注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件
注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件
重要的事情说三遍！
安装PWA插件
执行下面的命令
npm install hexo-pwa --save
hexo@4.2.0目前赞不兼容hexo-pwa,使用hexo@4.2.0版本的用户推荐降级到hexo@4.1.1
如何查看版本
hexo -version
安装指定版本
npm install hexo@4.1.1 --save
添加manifest.json和sw.js
manifest.json文件
manifest 生成地址： https://app-manifest.firebaseapp.com/
当然你也可以新建一个manifest.json文件，放在站点根目录下，然后复制下面我的代码，修改为你的信息即可
{
"name": "过客~励む",
"short_name": "过客~励む",
"theme_color": "#fff",
"background_color": "#49b1f5",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "/medias/36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/medias/48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/medias/72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/medias/96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/medias/144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/medias/180.png",
"sizes": "180X180",
"type": "image/png"
},
{
"src": "/medias/apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png"
},
{
"src": "/medias/192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/medias/512.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的文件，放在站点根目录下，在文件里填入一下内容
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?://yafine-blog.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());
}
注意：
将其中域名改为你自己主页的域名：
https?://yafine-blog.cn/改为你的域名，格式要和我的一样。
配置站点配置文件
将下面的配置代码复制到你的站点根目录配置文件_config.yml中
# PWA配置 npm i --save hexo-pwa
pwa:
manifest:
path: /manifest.json
body:
name: 过客~励む
short_name: 过客~励む
theme_color: white
background_color: white
display: standalone
orientation: portrait
scope: /
start_url: /
icons:
- src: /medias/48.png
type: image/png
sizes: 48x48
- src: /medias/96.png
type: image/png
sizes: 96x96
- src: /medias/128.png
type: image/png
sizes: 128x128
- src: /medias/144.png
type: image/png
sizes: 144x144
- src: /medias/180.png
type: image/png
sizes: 180x180
- src: /medias/192.png
type: image/png
sizes: 192x192
- src: /medias/512.png
type: image/png
sizes: 512x512
- src: /medias/apple-touch-icon.png
type: image/png
sizes: 180x180
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
准备Logo图片素材
为了确保你的 PWA 图标支持所有设备，请务必使用 48x48、96x96、128x128、144x144、180x180、192x192、512x512 分辨率的 Logo 图片各一张
推荐图片大小转换网站：https://www.iloveimg.com
将准备好的Logo图片素材放到配置文件所指向的对应的文件夹位置，我放在了F:\blog\themes\matery\source\medias（这是我的路径），修改配置文件，与其一一对应，切不可写错。
检查PWA服务
执行下面的命令：
hexo cl && hexo g && hexo s
然后在浏览器输入http://localhost:4000/，查看效果。
按F12或者Ctrl + Shift + I或者直接鼠标右键弹出的菜单中，有个检查，鼠标点击，就可以进入开发者调试模式，然后选择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，就会出现加号了。
添加 IOS Safari PWA 图标支持
在manifest.json文件中添加下面的代码，代码是关于apple-touch-icon图标的
{
"src": "/medias/apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png"
}
图标大小设置为
180 x 180
修改head.ejs文件
在themes/matery/layout/_partial/head.ejs，在head.ejs文件中的<head></head>标签之间添加下面的代码：
<link rel="apple-touch-icon" href="<%- theme.appletouchicon %>">
<meta name="theme-color" content="white"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- theme-color：中的 content 对应的是你
manifest.json中的theme_color的值 - viewport: 用于针对移动屏幕优化 PWA 应用 详细链接viewport
- apple-touch-icon：配置
apple-touch-icon图标链接
在主题配置文件_config.yml下添加下面的代码
appletouchicon: /medias/apple-touch-icon.png #你图片的路径
进行部署
如果你采用了gulp压缩的方式，就执行下面的命令：
gulp build
如果没有采用，则执行下面的命令：
hexo clean && hexo g -d
部署到代码托管平台后，打开浏览器，在地址栏输入你的域名，查看效果即可。
