HTML5 Application Cache 已被废弃，但残留缓存仍会干扰开发；需手动清除 chrome://appcache-internals 或 about:cache 中的条目，并在服务器拦截 .appcache 请求以彻底规避。

HTML5 Application Cache 已被废弃，但残留缓存仍会干扰开发

HTML5 的 applicationCache（AppCache）早在 Chrome 78、Firefox 72、Safari 14.1 中被彻底移除，但旧版缓存数据仍可能顽固驻留在浏览器中，导致页面加载陈旧资源、JS 不更新、甚至白屏。这不是“删不掉”，而是浏览器对已废弃机制的清理策略滞后，尤其在 Service Worker 与 AppCache 共存或切换过渡期更明显。

强制清除 AppCache 的可靠方法（Chrome / Edge / Firefox）

不能依赖「清空浏览数据」里的常规选项——AppCache 是独立存储，需手动触发清除。关键路径和操作如下：

• Chrome / Edge：访问 chrome://appcache-internals/（或 edge://appcache-internals/），页面列出所有已注册的 manifest URL，逐条点击 Remove
• Firefox：访问 about:cache → 滚动到底部点击 Application Cache Device → 查看并删除对应 origin 条目
• 无界面环境（如 CI 测试）：启动浏览器时加参数 --disable-application-cache 或使用 --user-data-dir 隔离全新配置

检查是否仍有 AppCache 干扰的快速验证方式

即使你已改用 Service Worker，旧 AppCache 仍可能劫持请求。执行以下检查可快速定位：

• 打开 DevTools → Application 面板 → 左侧菜单中若还显示 Cache Storage 下方有 Application Cache 区域（非灰色不可点），说明仍有残留
• 控制台运行 window.applicationCache：返回对象即表示该页面曾注册过 manifest，即使当前 HTML 已移除 manifest 属性，浏览器仍可能缓存关联资源
• Network 面板中查看某个 JS 文件响应头：若含 X-Content-Type-Options: nosniff 且状态码为 200 (from Application Cache)，就是它在作祟

彻底规避 AppCache 的工程实践要点

不再写 manifest 属性只是第一步；历史遗留和第三方脚本可能悄悄注册。真正有效的防护措施包括：

立即学习“前端免费学习笔记（深入）”；

• 在服务器层拦截所有 .appcache 请求，返回 404 或 410，防止被重新注册
• 检查所有 HTML 中是否残留 ，包括模板、CMS 输出、微前端子应用入口
• 若用 Webpack/Vite，确认构建插件未意外注入 applicationCache 相关代码（某些老版本 html-webpack-plugin 曾有此问题）
• Service Worker 注册前，主动调用 window.applicationCache.swapCache()（仅兼容旧浏览器）或 window.applicationCache.abort() 清理挂起状态（极少数场景需要）

if ('applicationCache' in window) {
  window.applicationCache.abort();
  // 注意：这不会删除已缓存内容，仅终止当前更新流程
}

最麻烦的不是技术手段，而是团队里还有人以为 manifest 是“现代离线方案”——得先统一认知，再删缓存。