登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > AppCache已弃用，如何用ServiceWorker替代？

AppCache已弃用，如何用ServiceWorker替代？

2026-01-15 14:18:44 0浏览 收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《AppCache废弃，如何用ServiceWorker替代？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

HTML5 AppCache 已废弃，必须迁移到 Service Worker；因其设计缺陷（缓存不可控、白屏陷阱等）且被 Chrome 94+、Firefox 85+、Safari 16.4+ 彻底移除，manifest 文件无效，需通过 register() 注册 sw.js 并手动管理缓存策略。

html5的applicationcache已废弃怎么办_改用serviceworker指南【方法】

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