AppCache 已被所有主流浏览器废弃，唯一可行的离线方案是 Service Worker + Cache API；因其存在更新不可控、全站故障、不支持请求拦截等根本缺陷，W3C 于 2018 年将其标记为 obsolete。
HTML5 的离线缓存（即 Application Cache，简称 AppCache）**早已被现代浏览器废弃**，Chrome 95+、Firefox 85+、Edge 95+ 均已完全移除支持，调用 window.applicationCache 会直接报 ReferenceError 或返回 null。现在唯一可行的离线方案是 Service Worker + Cache API。
为什么 applicationCache 不再可用
AppCache 存在根本性缺陷：缓存更新机制不可控、单页故障导致全站离线、不支持细粒度请求拦截。W3C 在 2018 年将其标记为“obsolete”，所有主流浏览器陆续下线。
- 访问
chrome://flags/#enable-appcache—— 该开关在新版 Chrome 中已消失 - 控制台执行
typeof applicationCache返回"undefined" - 使用
不触发任何缓存行为，也无警告
Service Worker 是当前唯一标准方案
它需要 HTTPS（本地 localhost 除外），且必须由主页面注册，不能通过 iframe 或第三方脚本加载。
- 注册入口必须写在主页面的 JS 中：
navigator.serviceWorker.register('sw.js') -
sw.js必须放在站点根目录或其子路径下（如不能放在/js/sw.js同时注册为'/js/sw.js'，需确保scope合法） - 首次注册后，页面需刷新一次才能激活缓存逻辑（因为 Service Worker 生命周期分 waiting → active）
/* sw.js 示例：最简离线缓存 */ const CACHE_NAME = 'v1'; const urlsToCache = [ '/', '/index.html', '/style.css', '/script.js' ];self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ); });
self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); });
常见失败原因和调试方法
Service Worker 容易因路径、作用域或生命周期问题静默失效，不是代码错，而是部署细节没对。
立即学习“前端免费学习笔记（深入）”；
- 注册失败：检查控制台是否报
DOMException: Failed to register a ServiceWorker—— 多因sw.js返回 404 或 MIME 类型非text/javascript - 缓存未生效：打开
Application → Service Workers面板，确认状态是activated，并点击 “Update on reload” 强制更新 - 离线测试前务必禁用 “Bypass for network”（DevTools → Network → ✅ 勾选 Offline）
- 修改
sw.js后必须更改文件内容（哪怕加个空格），否则浏览器认为无变更，不触发 reinstall
真正要让网页离线可用，关键不在“怎么写”，而在于理解 Service Worker 的事件流、缓存策略选择（Cache First？Network First？Stale-While-Revalidate？），以及如何处理动态资源（如 API 接口）——这些才是实际项目里卡住人的地方。
