优化打开博客速度，给您的Hexo添加上PWA吧

本文最后更新于：2022年2月9日 11:19

0. 版本

  • hexo相关版本

    • hexo: 6.0.0
    • hexo-cli: 4.3.0
    • node: 14.18.1

  • fluid主题版本

    • origin/master

1. 安装

1.1 安装fluid主题

  1. 在hexo根目录下，执行git submodule add https://github.com/fluid-dev/hexo-theme-fluid.git themes/fluid 下载主题源码
  2. 在hexo根目录下，创建_config.fluid.yml（hexo 5.0.0 以后，增加该方式可以覆盖主题的配置文件，详情请看hexo官方教程）
  3. 将themes/fluid主题源码中的_config.yml，内容直接复制到_config.fluid.yml中

经过上面三步，我们就能轻松更换一个主题了，是不是特别简单呢。

1.2 安装PWA（Progressive web app）

更多PWA的内容可以自行百度或者Google进行初步认识和了解

1.2.1 安装hexo-service-worker插件

hexo-offline\hexo-pwa，其他插件可以自行了解，其实都是差不多的。

在根目录执行，npm install hexo-service-worker --save

1.2.2 hexo-service-worker插件配置

在hexo配置文件（_config.yml，非主题的配置文件）中添加下面的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - public/**/*.{json,js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
  - public/*.js
  stripPrefix: public
  verbose: false
  runtimeCaching:
    - urlPattern: /**/*
      handler: cacheFirst
      options:
        - origin: jaryoung.com  #需要修改成自己的域名喔
        - origin: cdn.jsdelivr.net #cnd

1.2.3 新增manifest.json配置文件

  1. 准备icons图片，至少准备两张图片（像素：192x192、512x512），路径参考（hexo根目录/source/images/icons/）
  2. 新增manifest.json配置文件，放到hexo根目录/source下

图片和配置文件弄得比较麻烦，可以考虑自动生成的方案。使用 Web App Manifest Generator 或者https://manifest-gen.netlify.app 网站自动生成。

注意：

  1. manifest.json最好是放在source的目录下面喔（hexo根目录/source），需要在图片的根目录下面，不然根据manifest.json文件寻找图片的时候会有问题
  2. 使用网站自动生成 manifest.json 文件，必须要有icons数组的中增加属性值 “purpose”: “maskable” ，也就是配置中必须要有可屏蔽图标，否则Chrome无法正确识别。具体原因

参考文件如下：

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
{
  "name": "jaryoung.com",
  "short_name": "jaryoung.com",
  "theme_color": "#3a311c",
  "background_color": "#3a311c",
  "display": "standalone",
  "orientation": "any",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "splash_pages": null
}

注意，文件文件个人理解只要有192x192、512x512两组像素，总共4个图标配置就OK。还是要注意可屏蔽图标（”purpose”: “maskable”）是必须。

1.2.4 临门一脚，配置头文件

修改配置_config.fluid.yml文件

1
2
3
4
5
6
# 自定义 <head> 节点中的 HTML 内容
# Customize <head> HTML content
custom_head: '
<link rel="manifest" href="/manifest.json">
<script src="/sw-register.js"></script>
'

2. 验证

  1. 生成和发布代码

  2. 查询manifest.json配置情况，如果如下图所示，至少说明的配置文件已经正确识别读取。

    Application-截图1

    Application-截图2

    sw.js

    确保自己的sw.js被正确注册了喔，如果没有的话，记得在header里面引用 sw-register.js 让它注册好sw.js 文件

  3. 安装Chrome插件Lighthouse

  4. 如果是本地验证的时候，需要打开控制台；如果是部署到服务器或者GitHub page上面就不用了。

    Lighthouse-截图1

    Lighthouse-截图2

3. 遇到的问题及解决

  1. Manifest has a maskable icon
    解决办法：https://web.dev/maskable-icon-audit/，增加可屏蔽的图标
  2. manifest.josn文件一直加载不到，考虑fluid主题可能，或者hexo我的版本比较新导致生成html文件的加载manifest.josn的设置，幸好fluid主题提供，插入自定义html head的配置
    解决办法：修改配置_config.fluid.yml文件，custom_head: '<link rel="manifest" href="/manifest.json"><script src="/sw-register.js"></script>'
  3. 其他问题，如果实在不知道自己的问题出现在哪里，可以考虑看看 PWA OPTIMIZED ，我很多次都是通过上面的提醒和连接，解决问题
    Lighthouse-截图

4. 参考

  1. 给 Hexo 博客添加 PWA 支持
  2. Hexo doc
  3. 让PWA支持HEXO

以上是本文章的全部内容，希望自己踩过的坑能够帮助到您。

Hexo
#Hexo #PWA
优化打开博客速度，给您的Hexo添加上PWA吧
https://jaryoung.com/2022/02/03/Add-PWA-to-hexo-in-fluid-theme/
作者
Jerry Wu
发布于
2022年2月3日 19:42
更新于
2022年2月9日 11:19
许可协议