Chrome DevTools 中唯一可靠测试 HTML5 AppCache 的方式是 Application → Service Workers → 勾选 Offline；但 AppCache 已被 Chrome 94+ 彻底废弃，应改用 Service Worker + Cache API。
用 Chrome DevTools 模拟离线状态最可靠
真实断网测试不可靠，因为浏览器缓存、系统 DNS 缓存、Service Worker 干预都可能掩盖 manifest 未生效的问题。Chrome 的 Application > Service Workers > Offline 开关是唯一能干净隔离网络层、验证 HTML5 Cache API 行为的方式。
- 打开 DevTools →
Application标签页 → 左侧选中Service Workers - 勾选
Offline（注意：不是 Network 面板里的 Offline） - 刷新页面，观察是否加载成功；若失败，检查 Console 中是否报
Application Cache Error event: Manifest fetch failed - 该模式下所有 HTTP 请求都会被拦截并返回
net::ERR_INTERNET_DISCONNECTED，真正模拟“无网络栈”环境
manifest 文件必须满足三要素才能触发缓存
缺一不可。常见错误是只写了 CACHE: 却漏掉 CACHE MANIFEST 声明或 NETWORK: 部分，导致整个 manifest 被忽略。
- 首行必须是
CACHE MANIFEST（大小写敏感，不能有空格或 BOM） - 至少包含一个
CACHE:或NETWORK:区块 - HTML 页面的
标签必须带manifest属性，如： - 服务器必须返回
text/cache-manifestMIME 类型，Nginx 示例：add_type text/cache-manifest .manifest;
刷新行为决定你看到的是缓存还是新资源
HTML5 AppCache 的更新机制反直觉：普通刷新（F5 / Cmd+R）不会触发 manifest 检查，只有导航式访问（地址栏回车、链接跳转）或强制刷新（Ctrl+Shift+R）才检查更新。
- 首次访问：下载 manifest → 解析 → 下载所有
CACHE:列表资源 → 完成缓存 - 后续访问：浏览器比对 manifest 文件内容哈希，仅当内容变更才重新下载资源
- 调试时务必用
Ctrl+Shift+R强刷，否则你以为没更新，其实是旧缓存在运行 - 可通过 Console 执行
window.applicationCache.status查看当前状态（1=IDLE,2=CHECKING,4=UPDATEREADY）
Chrome 94+ 已彻底移除 AppCache，必须换方案
HTML5 manifest 是已被废弃的标准，Chrome 自 94 版本起完全删除支持，Edge、Firefox 也已跟进。即使测试通过，上线后用户将直接看到空白页或 404。
立即学习“前端免费学习笔记（深入）”；
- 替代方案只能是
Service Worker+Cache API，没有平滑迁移路径 - 若仍需兼容老设备（如部分工业终端 IE11），需双轨并行：manifest 保底 + SW 渐进增强
- 注意：同一域名下不能同时启用 AppCache 和 Service Worker，后者会阻止前者激活
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').catch(e => console.error('SW reg failed:', e));
}
真正关键的不是“怎么测离线”，而是“要不要还用它”——答案基本是否定的。
