Warning
官方文档的 PWA 功能只支持最基本的离线缓存，同时还会带来内容更新不及时的问题，本笔记并没有基于此，而是基于workbox自主实现的。
workbox配置
安装 workbox-cli 包：
$ pnpm add -D workbox-cli点击复制复制失败已复制
在项目根目录下新建 workbox-config.js 文件，写入如下内容：
module.exports = { globDirectory: 'docs/', globPatterns: [ '**/*.{md,js,ico,html,jpg,css}' ], swDest: 'docs/sw.js', ignoreURLParametersMatching: [ /^utm_/, /^fbclid$/ ], skipWaiting: true, clientsClaim: true };点击复制复制失败已复制
ServiceWorker配置
新建 docs/registerServiceWorker.js 文件，写入如下内容：
register(`/sw.js`, { ready() { console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB'); }, registered() { console.log('Service worker has been registered.'); }, cached() { console.log('Content has been cached for offline use.'); }, updatefound() { console.log('New content is downloading.'); }, updated() { console.log('New content is available; please refresh.'); window.location.reload(); // serviceWorker缓存更新时刷新页面 }, offline() { console.log('No internet connection found. App is running in offline mode.'); }, error(error) { console.error('Error during service worker registration:', error); } });点击复制复制失败已复制
接下来在 index.html 文件中引入：
<script src="./registerServiceWorker.js"></script>点击复制复制失败已复制
package.json配置
修改 package.json 的启动配置：
{ "scripts": { "start": "node index.js && workbox generateSW workbox-config.js && docsify serve docs", "build": "node index.js && workbox generateSW workbox-config.js" } }点击复制复制失败已复制
.gitignore配置
由于 workbox 会生成 ServiceWorker 的一些文件，所以需要将自动生成的文件写入到 .gitignore 配置中
# workbox 自动生成文件 docs/sw.js docs/sw.js.map docs/workbox-*
