cover

让 Hugo 博客支持 PWA

让用 Hugo 搭建的博客支持 PWA 很简单,只需 2 个步骤即可:

添加一个 manifest.json 文件

使用 https://app-manifest.firebaseapp.com 来生成博客的 manifest.json 文件,然后将生成出来的文件和图片放到博客的 static 目录,然后在 layout/index.html 的 标签内引用这个文件

1
2
3
4
5
<head>
...
<link rel="manifest" href="/manifest.json" />
...
</head>

这样你的博客就可以安装到桌面了

使用 Workbox 工具注册 ServiceWorker

在 static 新建一个 sw.js 文件,在文件添加以下内容用来为网络请求添加缓存;主要是缓存静态资源 js,css,图片以及字体等文件,
详细文档可以查看 Workbox 文档

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
importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn/workbox/workbox-sw.js')

if (workbox) {
console.log(`Yay! Workbox is loaded 🎉`)

workbox.routing.registerRoute(
/\.(?:js|css)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'static-resources'
})
)

workbox.routing.registerRoute(
/\.(?:png|jpg|jpeg|svg|gif)$/,
new workbox.strategies.CacheFirst({
cacheName: 'image-cache',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 20,
maxAgeSeconds: 7 * 24 * 60 * 60
})
]
})
)

workbox.routing.registerRoute(
/^https:\/\/fonts\.googleapis\.com/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'google-fonts-stylesheets'
})
)

workbox.routing.registerRoute(
/^https:\/\/fonts\.gstatic\.com/,
new workbox.strategies.CacheFirst({
cacheName: 'google-fonts-webfonts',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200]
}),
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
maxEntries: 30
})
]
})
)
} else {
console.log(`Boo! Workbox didn't load 😬`)
}

基本完成了,可以用 Chrome 的 Audits 的工具跑了一下分,看看还有什么地方要修改的。

知识共享许可协议
← 对于 PWA 应用的 manifest.json 文件的解释 了解 标签上 Rel=prexxx 的作用 →