application cache已废弃，service worker是当前唯一标准化、全平台支持的离线方案，需通过https/localhost注册，注意install阶段缓存原子性、fetch事件分类型处理及缓存版本清理。
Application Cache 已被现代浏览器废弃，Chrome 95+、Firefox 85+、Safari 16.4+ 均已移除支持。直接用 manifest 属性 + .appcache 文件的方式，在当前主流浏览器中完全失效，且无法降级兼容。
如果你的目标是“让用户在断网时仍能打开网页并看到内容”，请立刻转向 Service Worker —— 它是当前唯一被 W3C 标准化、全平台支持、可精细控制的离线方案。
Service Worker 注册失败的常见原因
- 页面不是通过
https或localhost提供的：非安全上下文下navigator.serviceWorker为undefined -
sw.js路径错误或返回了非200状态码（比如 404 或 302 重定向） -
sw.js文件响应头中包含Cache-Control: no-cache或must-revalidate，导致注册被浏览器拒绝 - 同一域名下已有激活中的 Service Worker，新注册脚本未触发更新（需手动 unregister 或等待下次 fetch）
检查方法：
打开 DevTools → Application → Service Workers，看是否显示 “Waiting”、“Active” 或报错信息；若为空白且无提示，大概率是注册脚本根本没执行。
install 阶段缓存资源不生效
cache.addAll() 是原子操作：只要列表中任一资源 fetch 失败（如路径 404、跨域、MIME 类型不匹配），整个缓存就会中止，waitUntil 报错，Worker 卡在 installing 状态。
常见踩坑点：
-
cache.addAll(['/', '/index.html'])中/实际返回的是服务端渲染页面（含动态 HTML），但该响应头带Cache-Control: no-store→ 缓存失败 - 引用了相对路径资源（如
./style.css），而sw.js在子目录（如/js/sw.js）下注册 → 路径解析为/js/./style.css，404 - 清单里写了
/images/logo.png，但实际文件名是logo@2x.png或大小写不符（Linux 服务器区分大小写）
建议做法：
- 所有预缓存路径统一用绝对路径（以
/开头） - 在
install前加日志：console.log('installing with:', urlsToCache) - 用
fetch(url).then(r => r.ok ? r : Promise.reject(r))手动校验每个 URL
fetch 事件里离线 fallback 写法容易出错
只写 caches.match(event.request).then(r => r || fetch(event.request)) 是典型“半离线”写法：它对 HTML 请求有效，但对 API 接口请求会暴露错误（比如返回空 JSON 或 504 页面）。
更稳妥的模式是分类型处理：
- HTML 页面请求 → 优先返回缓存，无则 fallback 到
/offline.html - CSS/JS/图片等静态资源 → 必须命中缓存，否则报错（说明构建或部署漏文件）
- API 请求（如
/api/user）→ 直接返回Response.error()或自定义 JSON 错误体，避免前端解析异常
示例片段（简化版）：
self.addEventListener('fetch', event => {
const { request } = event;
const url = new URL(request.url);
<p>if (request.destination === 'document') {
event.respondWith(
caches.match(request).then(r => r || caches.match('/offline.html'))
);
} else if (url.pathname.startsWith('/api/')) {
event.respondWith(Response.error());
} else {
event.respondWith(
caches.match(request).then(r => r || fetch(request))
);
}
});</p>
Service Worker 的缓存不是“设好就完事”的黑盒，它依赖你对每个资源路径、响应头、网络状态和用户预期的明确判断。最容易被忽略的是：缓存版本升级后，旧缓存不会自动清理，长期运行可能占满用户设备存储，尤其在 PWA 场景下。上线前务必测试 caches.delete() 清理逻辑，并监控 caches.keys() 返回的缓存列表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
