ServiceWorker替代ApplicationCache方法解析

HTML5的Application Cache（AppCache）因设计缺陷——如缓存不可控、白屏陷阱、无法处理非GET请求等——已被所有主流浏览器彻底废弃，Chrome 94+、Firefox 85+、Safari 16.4+均已移除支持，manifest文件完全失效；取而代之的是更强大也更需精细掌控的Service Worker：它要求开发者主动注册sw.js、在HTTPS环境下（localhost除外）通过install和fetch事件手动管理缓存策略、按需预缓存与动态缓存资源，并直面版本控制、生命周期调试、跨域限制等真实挑战——迁移不是简单替换API，而是从“黑盒自动缓存”转向“显式、可维护、可调试”的现代离线能力构建。

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() 拦截不到