hexo博客简单支持PWA

文章首次发表在: 博客支持PWA了~

前言

使用hexo插件使博客支持pwa功能,目前我所知道的有两种插件均可实现该功能

前提(HTTPS)

全站支持HTTPS.(ps: 目前本人使用的是腾讯云的免费证书)

网站配置HTTPS, 已经有很多文章写了配置过程, 本篇文章不在赘述

使用hexo-pwa

1.安装hexo-pwa

1
npm i --save hexo-pwa

2.修改配置文件

hexo的配置文件采用yml语言, 想要了解该语言的可以去看看

在根目录的_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": "funnycoderstar"
"short_name": "star"
"theme_color": "rgba(203,7,83,0.86)"
"background_color": "#FAFAFA"
"display": "standalone"
"Scope": "/"
"start_url": "/"
icons:
- src: https://cdn.wangyaxing.cn/icon-144x144.png?v=1
sizes: 144x144
type: image/png
- src: https://cdn.wangyaxing.cn/icon-128x128.png
sizes: 128x128
type: image/png
- src: https://cdn.wangyaxing.cn/icon-96x96.png
sizes: 96x96
type: image/png
serviceWorker:
path: /sw.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

参数含义可以去hexo-pwa文档中查看

3.添加manifest.jsonsw.js

这两个文件放的位置要和配置中的路径一致, 我是放在跟目录的
sw.js

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

workbox.routing.registerRoute(new RegExp('.*.html'), workbox.strategies.networkFirst());

workbox.routing.registerRoute(new RegExp('.*.(?:js|css)'), workbox.strategies.staleWhileRevalidate());

workbox.routing.registerRoute(new RegExp('https://cdn.wangyaxing.cn/'), workbox.strategies.cacheFirst());
}

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
{
"name": "funnycoderstar",
"short_name": "star",
"theme_color": "rgba(203,7,83,0.86)",
"background_color": "#FAFAFA",
"display": "standalone",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "/source/images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/source/images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/source/images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
],
"splash_pages": null
}

manifest生成地址: https://app-manifest.firebaseapp.com/

4.将funnycoderstar安装到主屏(PWA)

  1. 地址栏输入: Chrome://flags
  2. 搜索并启用以下项目: Desktop PWAs(桌面PWAs)、App Banners(应用横幅)、Experimental App Banners(实验性应用横幅)
  3. 重启浏览器使修改的设置生效
  4. 点击地址栏最右边按钮
  5. 选择”安装 funnycoderstar”

image

在桌面上即可看到博客的小图标

image

感兴趣的小伙伴可以来我的博客体验一下, 哈哈~~ https://.wangyaxing.cn/

使用hexo-offline

使用基本与hexo-pwa相同, 下面简述一下过程

1. 安装

1
npm i --save hexo-offline

2. 修改配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Offline
## Config passed to sw-precache
## https://github.com/JLHwung/hexo-offline
offline:
maximumFileSizeToCacheInBytes: 10485760
staticFileGlobs:
- public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,json,xml}
stripPrefix: public
verbose: true
runtimeCaching:
- urlPattern: /*
handler: cacheFirst
options:
origin: cdn.example.com
- urlPattern: /*
handler: cacheFirst
options:
origin: cdn.another-example.org

3. 添加manifest.json

manifest.json放到 source目录下

4. 引入manifest.json

next主题在 layout/_partials/head.swig添加

1
<link rel="manifest" href="/manifest.json">

注意

  • 文件放置位置一定要与配置文件中写的路径一致
  • 图标大小一定按照PWA的严格要求
  • 打开 Chrome Dev Tools的Application一栏中进行调试

image

  • 还可以通过观察network中的请求是否有小齿轮标志来检测serviceWorker是否已加载
    image

参考