HTML5 AppCache 已废弃，必须迁移到 Service Worker；因其设计缺陷（缓存不可控、白屏陷阱等）且被 Chrome 94+、Firefox 85+、Safari 16.4+ 彻底移除，manifest 文件无效，需通过 register() 注册 sw.js 并手动管理缓存策略。
HTML5 的 applicationCache（AppCache）已彻底废弃，所有现代浏览器都不再支持，强行使用会静默失效或报 DOMException: Application Cache API is deprecated 错误。必须迁移到 Service Worker。
为什么不能继续用 applicationCache
AppCache 设计存在根本缺陷：缓存更新逻辑不可控、离线优先但不支持精细版本管理、主文档强制缓存导致“白屏陷阱”、无法拦截非 GET 请求。Chrome 94+、Firefox 85+、Safari 16.4+ 已完全移除支持，连 window.applicationCache 都是 undefined。
- Manifest 文件（
cache.manifest）不再被解析 -
manifest属性写在上毫无作用 - 即使旧代码没报错，实际也完全不缓存资源
用 Service Worker 替代的最小可行步骤
核心是注册一个 Service Worker 脚本，监听 install 和 fetch 事件，手动控制缓存策略。
- 确保网站运行在 HTTPS（本地
localhost除外） - 在页面 JS 中调用
navigator.serviceWorker.register()，路径需为同源绝对路径（如'/sw.js'，不能是'./sw.js'） -
sw.js必须放在站点根目录或其子目录下（作用域限制） - 首次注册后需刷新页面才能触发
fetch拦截（因 Service Worker 在下次导航才生效）
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}
fetch 事件中如何正确缓存静态资源
不要照搬 AppCache 的“全量缓存”思路。Service Worker 更灵活，但也更需明确缓存键、更新时机和回退策略。
立即学习“前端免费学习笔记（深入）”；
- 用
caches.open('v1')创建命名缓存，版本号建议随构建自动变更（如v1-20240520） - 在
install事件中用event.waitUntil()预缓存关键资源，避免skipWaiting()导致旧 SW 卡住 - 在
fetch事件中优先match()缓存，未命中再fetch()网络，并可选地将响应put()进缓存（按需缓存） - 避免缓存带时间戳或哈希的资源（如
app.abc123.js）时用原始 URL 匹配失败——应统一用new Request(url, { ignoreSearch: true })处理
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
if (url.origin === location.origin && url.pathname.startsWith('/static/')) {
event.respondWith(
caches.match(event.request)
.then(cached => cached || fetch(event.request).then(res => {
const copy = res.clone();
caches.open('v1').then(cache => cache.put(event.request, copy));
return res;
}))
);
}
});
常见坑：缓存更新不生效、页面仍走网络、SW 不激活
Service Worker 的生命周期比 AppCache 复杂得多，很多问题源于对状态流转理解偏差。
- 修改
sw.js后，浏览器只对比文件字节内容——哪怕只加一个空格，也算新版本，但旧 SW 仍控制当前页面，需手动skipWaiting()或关闭标签页重开 - 调试时勾选 DevTools → Application → Service Workers → “Update on reload”，否则刷新不会触发更新检测
- 如果
sw.js返回 404 或语法错误，注册会失败且无明显提示；检查 Network 面板确认状态码和 JS 解析结果 -
fetch()拦截不到或跨域请求（CORS 需服务端配Access-Control-Allow-Origin）
真正麻烦的不是写几行 Service Worker 代码，而是把原来 AppCache 里隐式依赖的“全量缓存+自动更新”逻辑，拆解成显式的缓存命名、版本管理、请求分类、失效清理——这些都得自己设计，没有银弹。
