html怎么创建workbox预缓存清单_html Workbox precacheManifest预缓存【进阶】-html教程-PHP中文网

precachemanifest是由workbox-webpack-plugin在构建时自动生成的资源预缓存清单数组，含url、revision等字段，供workbox.precaching.precacheandroute()调用实现离线缓存；手写会因revision不匹配、路径不可访问或缺失隐式字段而失败。

html怎么创建workbox预缓存清单_html workbox precachemanifest预缓存【进阶】

workbox-webpack-plugin 生成的 `precacheManifest` 是什么

它不是手动写的 JSON 列表，而是由 workbox-webpack-plugin（或 workbox-cli）在构建时自动生成的数组，每个元素描述一个需预缓存的资源：包含 url、revision（内容哈希）、timestamp 等字段。Workbox 运行时靠它调用 workbox.precaching.precacheAndRoute() 完成离线资源注入。

为什么直接写死 `precacheManifest` 数组会失败

常见错误是手写一个类似 [{url: '/index.html', revision: 'abc123'}] 的数组传给 precacheAndRoute()，结果资源不进缓存，甚至控制台报 Unable to precache X — no response。原因有三：

revision 字段必须与实际资源响应头（如 ETag）或响应体哈希严格匹配；手写无法保证一致性
Workbox 默认要求所有预缓存项能被 fetch 到（即路径可访问），本地开发时若未起服务，/index.html 直接读文件系统会失败
缺少 integrity 或 cacheName 等隐式字段，某些版本会静默跳过

正确接入方式：用插件生成 + 注入到 Service Worker

核心是让构建工具“算出清单”，再让 SW 脚本“拿到它”。以 Webpack 为例：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

安装 workbox-webpack-plugin（v6+ 推荐 GenerateSW 模式）

在 webpack.config.js 中配置：

new GenerateSW({
  swDest: 'sw.js',
  globDirectory: 'dist',
  globPatterns: ['**/*.{html,js,css,svg,png,jpg}'],
  skipWaiting: true,
  clientsClaim: true
})

插件会自动在 dist/sw.js 开头注入 self.__WB_MANIFEST = [...]，无需你 import 或赋值
确保你的 sw.js 里有且仅有这一行调用：workbox.precaching.precacheAndRoute(self.__WB_MANIFEST)

注意：self.__WB_MANIFEST 是全局变量名，不可改；如果用了 InjectManifest 模式，则需在自定义 sw.js 中预留 injectManifest 占位符（// inject:manifest），插件才会写入。

调试时看不到 `__WB_MANIFEST`？检查这些点

生成后打开 sw.js 文件，第一眼没看到 self.__WB_MANIFEST = [...]，大概率是以下问题：

Webpack 构建未成功执行插件（检查终端是否有 Generated sw.js 日志）
swDest 路径和实际注册的 Service Worker 路径不一致（比如注册的是 /service-worker.js，但插件输出到 sw.js）
用了 InjectManifest 却忘了在 sw.js 里加注释占位符，导致注入失败
开发服务器（如 webpack-dev-server）默认不输出静态文件，sw.js 实际是内存中生成的，需用 CopyWebpackPlugin 手动拷贝或切到 dist 目录验证