遇到任何问题，优先在本页面搜索，看看是否已经有该配置教程；
不懂得可以百度或者 Google；
还有弄不明白的可以在本站点留言，或添加站长 Wechat、QQ 等

文档目录

环境准备
搭建基础
主题配置
主题优化 - 添加 PWA
自动部署

前言

Q：为什么让你的博客支持 PWA？

  • 可以支持离线观看
  • 可被识别成一个应用程序
  • 响应式 适合任何形式的设备

前提

  • 全站支持 HTTPS

安装 hexo-pwa

运行如下命令，安装 hexo-pwa

1
npm i hexo-pwa --save

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

查询版本 

1
hexo --version

安装 Hexo 指定版本

1
npm i hexo@4.1.1 --save

修改配置文件 _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
pwa:
  manifest:
    path: /manifest.json
    body:
      name: Sitoi
      short_name: Sitoi
      theme_color: white
      background_color: white
      display: standalone
      orientation: portrait
      scope: /
      start_url: /
      icons:
        - src: /medias/logo_48.png
          type: image/png
          sizes: 48x48
        - src: /medias/logo_96.png
          type: image/png
          sizes: 96x96
        - src: /medias/logo_128.png
          type: image/png
          sizes: 128x128
        - src: /medias/logo_144.png
          type: image/png
          sizes: 144x144
        - src: /medias/logo_180.png
          type: image/png
          sizes: 180x180
        - src: /medias/logo_192.png
          type: image/png
          sizes: 192x192
        - src: /medias/logo_512.png
          type: image/png
          sizes: 512x512
        - src: /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

注：_config.yml 中的 manifest 下的 body 与 manifest.json 文件内容保持一致

  • manifest - manifest 配置
    • path - manifest.json 的路径，例：/manifest.json
    • body - manifest.json 的内容，manifest.json 例子. body 可以为空。如果为空，hexo-pwa 会生存一个 manifest.json 和 JSON.stringify(body)
  • serviceWorker - service worker 配置
    • path: sw.js路径，例: /sw.js, 请务必将 sw.js 放在主目录下
    • preload - 您要预加载的网址或帖子
      • urls: 预载网址的数组
      • posts: 预载帖子数
    • opts: sw-toolbox 的选项
    • routes - 根据 sw-toolbox 请求路由和策略。路线顺序很重要。
      • pattern: URL 模式，此配置可以是快速样式或 RegExp
      • strategy: 您要选择的策略。 所有策略: cacheFirst, networkFirst, cacheOnly, networkOnly, fastest。警告：日志请求应使用 networkOnly 策略。
  • priority - 插件优先级 (default value is 10)

添加 manifest.json 和 sw.js

manifest.json

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

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
{
  "name": "Sitoi",
  "short_name": "Sitoi",
  "theme_color": "white",
  "background_color": "white",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/medias/logo_48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/medias/logo_96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/medias/logo_128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/medias/logo_144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/medias/logo_180.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "/medias/logo_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/medias/logo_512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ]
}

参数解释：

  • 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

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?://sitoi.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?://sitoi.cn/?$ 的正则表达式路径，将这个的值修改成你的网站的 host

准备 Logo 图片

为了确保你的 PWA 图标支持所有设备，请务必使用 48x48、96x96、128x128、144x144、180x180、192x192、512x512 分辨率的 Logo 图片各一张

将上述图片放到对应的目录下，并修改 _config.yml 和 manifest.json 与之对应

推荐图片大小转换网站：https://www.iloveimg.com

检查 PWA 服务

启动你的 hexo 博客

1
2
hexo cl
hexo s

这里你的启动可能会启动失败，很有可能的原因是因为 hexo 版本的问题，推荐使用 hexo@4.1.1 及以下版本，请运行以下命令，重新安装 hexo

1
npm i hexo@4.1.1 --save

打开你的博客：http://localhost:4000/

按 F12 或 右击选择检查 进入调试页面 后选择 Application：

检查 Manifest

看到配置正确即可

Manifest

检查 Swrvice Workers

看到 Status activated and is running 即可

Swrvice Workers

使用 Chrome 安装 PWA 应用

如果一切配置正确，你会看到 你的 Chrome 浏览器 URL 栏的最右侧 有个 ➕ 号，点击即可安装 PWA 应用了

INSTALL PWA

没有也没关系，很有可能是你的 chrome 浏览器没有开对应的服务

打开方式如下：

  1. 地址栏输入：Chrome://flags

  2. 搜索并启用以下项目：Desktop PWAs local updating ,Intent picker 设置为 enable 即可。

  3. 重启浏览器即可添加支持。

安装成功后，你的电脑桌面就会有你的博客的 PWA 应用了。

你以为就结束了吗，一切 ok 了吗，NO 这是一篇完美的安装 PWA，你会发现，使用 ios 的 Safari 添加到主屏幕，图标并不是你设置的。

添加 IOS Safari PWA 图标支持

具体原因是因为缺少 apple-touch-icon 的图标，细心的网友应该在上文的 manifest.json 中的 icon 配置中发现了

manifest.json 添加 apple-touch-icon 图标

1
2
3
4
5
{
  "src": "/apple-touch-icon.png",
  "sizes": "180x180",
  "type": "image/png"
}

图标的大小设置为 180x180 直接复制一份，重命名一下即可

注：_config.yml 中的 manifest 下的 body 与 manifest.json 文件内容保持一致

修改 head.ejs 文件

文件路径：themes/matery/layout/_partial/head.ejs

在 head 标签里 添加三个元素

1
2
3
<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 
    1
    appletouchicon: /apple-touch-icon.png

到此你的 Hexo 博客应该完美的添加了 PWA 了 ~~ 赶紧去体验一下离线访问博客的快速吧。
如有问题，请在下方留言!