PWA 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。关于这些含义的细节,请参阅 PWA的优势。简单概括为以下几点
实际操作
hexo --version
npm i hexo@4.1.1 --save
PWA
插件npm i hexo-pwa --save
非主题配置文件
)manifest 生成地址: Web App清单生成器,如无法打开直接复制我的即可
# 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/icon/logo_128.png
type: image/png
sizes: 128x128
- src: /medias/icon/logo_512.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
详细配置请参考GitHub官方库,我这里不做介绍
\blog\source\manifest.json
目录下添加manifest.json
,键入以下内容{
"name": "框架师",
"short_name": "框架师",
"theme_color": "white",
"background_color": "white",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "/medias/icon/logo_128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/medias/icon/logo_512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
\blog\source\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?://www.mobaijun.com/?$'), 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?://www.mobaijun.com/?$
的正则表达式路径,将这个的值修改成你的网站的host
为了确保你的 PWA 图标支持所有设备,请务必使用
48x48
、96x96
、128x128
、144x144
、180x180
、192x192
、512x512
分辨率的 Logo 图片各一张,我觉得麻烦,所有只添加了512px/128px,如你想要添加所有的格式,按照以上格式复制即可
将上述图片放到对应的目录下,并修改 _config.yml
和 manifest.json
与之对应
推荐图片大小转换网站:iloveimg
# 清理缓存/生成静态页面/本地预览
$ hexo clean && hexo g && hexo s
更多详细内容请参考sitoi写的文章基于 Hexo GitHub 从零开始搭建个人博客(四):让你的博客完美支持 PWA,我只是简化了一些繁琐的步骤,搞定以后,浏览器地址栏会出现一个
+
号,点击添加,即可在桌面看到你的应用程序啦!