html5manifest离线应用怎么测试_断网环境验证操作步骤【指南】

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-manifest MIME 类型，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)); }

真正关键的不是“怎么测离线”，而是“要不要还用它”——答案基本是否定的。