hexo-service-worker 是一个可以让Hexo博客拥有 PWA 支持的插件，能够默认的把站点中 public 内的所有静态资源包括 html、css、js、image 等文件缓存起来，达到离线（无网络环境）可访问的效果，拥有像原生APP一般的丝滑体验。
Hexo-PWA
PWA前提
你的博客全站资源必须为HTTPS，PWA支持的前提条件。
你的博客全站资源必须为HTTPS，PWA支持的前提条件。
你的博客全站资源必须为HTTPS，PWA支持的前提条件。
什么是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 后台同步
- 响应式设计
安装插件
npm i -S hexo-service-worker
配置config
在博客根目录下的_config.yml文件，添加如下配置：
# PWA -- offline config passed to sw-precache.
service_worker:
maximumFileSizeToCacheInBytes: 52428800
staticFileGlobs:
- public/**/*.{js,html,xml,json,css,png,jpg,gif,svg,eot,ttf,woff,woff2,ico,cur} # code 1
- https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js # code 2
- https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js # code 3
stripPrefix: public
verbose: true
runtimeCaching:
- urlPattern: /*
handler: cacheFirst
options:
origin: tiven.cn
- urlPattern: /*
handler: cacheFirst
options:
origin: cdn.bootcdn.net
-
staticFileGlobs是一个列表，可以使用正则来匹配某个目录，code 1配置是缓存public文件夹下面的指定静态资源和静态 html 页面。 -
code 2和code 3是配置缓存第三方的CDN资源jquery和lodash，这里只是举例，可以根据博客中实际使用到的资源具体来配置。 -
runtimeCaching是配置某个域名下使用到的静态资源，也是一个List，支持配置多个origin域。
生成配置 manifest.json 文件
在source目录下新建manifest.json 文件，可以参考本站博客配置，具体code如下：
{
"name": "天問的个人博客",
"short_name": "天問",
"description": "天問的个人网站，记录学习，分享coding。生命不息，奋斗不止...",
"theme_color": "#C69DC9",
"background_color": "#C69DC9",
"display": "standalone",
"orientation": "portrait-primary",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "img/icons/icon-32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "img/icons/icon-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "img/icons/icon-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icons/icon-144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "img/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icons/icon-256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "img/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
注意： 所有icons的src路径，sizes尺寸大小、type类型都需要一一对应。
引用manifest.json
本站使用的是hexo默认主题，使用了ejs模板引擎，在公共head.ejs中添加下代码，其他主题应该类似。
<link rel="manifest" href="/manifest.json">
部署后可以打开 控制台 - Application - Manifest / Service Workers / Storage，进行调试、查看缓存情况。
参考文档：
欢迎访问：个人博客地址
