workbox 自动生成的 precachemanifest 是构建时生成的预缓存资源数组，含 url、revision 等字段，由 workbox-webpack-plugin 注入 sw 并通过 precacheandroute 实现离线可用。
Workbox 生成的 precacheManifest 是什么
它不是你手写出来的清单，而是 Workbox 构建工具（如 workbox-webpack-plugin 或 workbox-cli）在打包时自动生成的一个数组，每个元素描述一个需预缓存的资源：含 url、revision（哈希值）、有时含 timestamp。浏览器端通过 workbox.precaching.precacheAndRoute() 加载它，实现离线可用。
用 workbox-webpack-plugin 自动生成清单（推荐）
手动维护清单极易出错，且无法保证哈希一致性。Webpack 插件会在每次构建时扫描输出文件，生成带正确哈希的 precacheManifest 并注入到 SW 文件中。
关键配置项：
-
importWorkboxFrom: 'local'—— 把 Workbox 库也打进本地 SW，避免 CDN 不稳定 -
swDest指向最终生成的 Service Worker 路径，比如'dist/sw.js' -
globPatterns控制哪些静态资源进预缓存（如['**/*.{html,js,css,svg,png,jpg}']），但更推荐用webpackAssets模式（默认启用），它只处理 Webpack 输出的 asset，更精准 - 确保
mode: 'production'，否则哈希不会生成，precacheManifest为空数组
示例插件配置片段：
new WorkboxPlugin.GenerateSW({
swDest: 'sw.js',
importWorkboxFrom: 'local',
// 不需要手动写 precacheManifest，插件自动注入
})
在 Service Worker 中正确使用 precacheAndRoute
生成的清单会以变量名 self.__WB_MANIFEST 注入到 SW 文件顶部（由插件自动完成）。你只需调用：
import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);
注意几点：
- 不要把
self.__WB_MANIFEST写死成空数组或手动拼对象——这会导致缓存失效或 404 - 如果用了
InjectManifest模式，必须在 SW 源文件里显式保留self.__WB_MANIFEST占位符（插件会替换它），例如：precacheAndRoute(self.__WB_MANIFEST || []); -
precacheAndRoute默认对清单中所有资源执行“缓存优先 + 版本校验”，一旦文件内容变化，哈希变更，旧缓存自动淘汰
常见错误：清单存在但资源 404 或不更新
典型现象：SW 安装成功，但离线打开页面白屏或报 404；或修改了 JS 文件，用户刷新后仍加载旧版本。
- 路径不匹配：
globPatterns匹配到了dist/js/app.js，但实际请求的是/js/app.js—— 检查globDirectory和manifestTransforms是否调整了url前缀 - 开发环境误启 SW：本地
http://localhost:3000下 SW 可能缓存了旧 manifest，清空 Application → Clear storage → “Clear site data” 再试 - CDN 或反向代理覆盖了 SW 的
Cache-Control头，导致浏览器没拉新 SW —— 确保 SW 文件响应头含Cache-Control: no-cache - HTML 文件本身没进预缓存（
index.html往往被忽略），导致离线时根路径不可用 —— 显式加进globPatterns或用additionalManifestEntries
真正麻烦的从来不是生成清单，而是让每条 url 和实际网络请求路径严丝合缝。多看 DevTools → Application → Cache Storage 里缓存的 key 是什么，再比对 self.__WB_MANIFEST 里的 url 字段，差一个斜杠都得修。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
