HEXO支持的PWA官网插件:hexo-offline

  • Github项目地址
    https://github.com/JLHwung/hexo-offline

  • hexo-offline 是一个可以让Hexo博客拥有 PWA 支持的插件,能够默认的把站点中public内的所有静态资源包括 html、css、js、image 等文件缓存起来,达到离线(无网络环境)可访问的效果,拥有像原生APP一般的丝滑体验。

PWA介绍

  • PWA,即 Progressive Web App, 是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。

  • 理解: PWA不是某一项技术,或者某一个新的产物;而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准,可以从安全、性能和体验三个方面,优化我们的Web App。所以,其实PWA本质上依然是一个Web App。

PWA包含的技术:

  • Web App Manifest
  • Service Worker
  • Cache API 缓存
  • Push、Notification 推送与通知
  • Background Sync 后台同步
  • 响应式设计

PWA使用前提

你的博客全站资源必须为HTTPS,PWA支持的前提条件。

PWA配置

作者: Jerry
連結: https://butterfly.js.org/posts/ceeb73f/#PWA
來源: Butterfly

要为Butterfly配上 PWA 特性, 你需要如下几个步骤:

  1. 打开 hexo 工作目录

  2. npm install hexo-offline --save 或者 yarn add hexo-offline

  3. 在根目录创建 hexo-offline.config.cjs 文件,并增加以下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// offline config passed to workbox-build.
module.exports = {
globPatterns: ['**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}'],
// 静态文件合集,如果你的站点使用了例如 webp 格式的文件,请将文件类型添加进去。
globDirectory: 'public',
swDest: 'public/service-worker.js',
maximumFileSizeToCacheInBytes: 10485760, // 缓存的最大文件大小,以字节为单位。
skipWaiting: true,
clientsClaim: true,
runtimeCaching: [ // 如果你需要加载 CDN 资源,请配置该选项,如果没有,可以不配置。
// CDNs - should be CacheFirst, since they should be used specific versions so should not change
{
urlPattern: /^https:\/\/cdn\.example\.com\/.*/, // 可替换成你的 URL
handler: 'CacheFirst'
}
]
}

更多内容请查看 hexo-offline的官方文档

  1. 在主题配置文件中开启 pwa 选项。
1
2
3
4
5
6
7
pwa:
enable: true
manifest: /img/pwa/manifest.json
apple_touch_icon: /img/pwa/apple-touch-icon.png
favicon_32_32: /img/pwa/32.png
favicon_16_16: /img/pwa/16.png
mask_icon: /img/pwa/safari-pinned-tab.svg
  1. 在创建source/目录中创建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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
"name": "string",
"short_name": "Junzhou",
"theme_color": "#49b1f5",
"background_color": "#49b1f5",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "images/pwaicons/36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "images/pwaicons/48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "images/pwaicons/72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/pwaicons/96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/pwaicons/144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/pwaicons/192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/pwaicons/512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}

你也可以通过 Web App Manifest快速创建manifest.json。(Web App Manifest 要求至少包含一个 512*512 像素的图标)

  1. 可以通过Chrome插件Lighthouse检查 PWA 配置是否生效以及配置是否正确。
    • 打开博客页面
    • 启动Lighthouse插件 (Lighthouse插件要求至少包含一个 512*512 像素的图标)
      关于 PWA(渐进式增强 Web 应用)的更多内容请参閲 Google Tools for Web Developers