HTML5离线应用怎么识别_HTML5 Manifest缓存机制判断【判断】_技术教程

HTML5 Manifest 已被现代浏览器弃用，判断是否生效需检查 Network 中 manifest 请求、applicationCache.status 值（2 表示已缓存）、Cache Storage 是否有条目，并监听 cached/updateready 事件；Chrome 94+ 等已彻底移除支持，应改用 Service Worker + Cache API。

如何判断 HTML5 Manifest 是否生效

Manifest 缓存是否启用，不能只看 manifest 属性是否存在，关键得验证浏览器是否真正下载、解析并应用了清单文件。最直接的判断方式是检查网络请求和 Application Cache API 状态。

打开浏览器开发者工具（F12），切换到 Network 面板，刷新页面，观察是否发起对 manifest 文件的 GET 请求（状态码应为 200）
在 Console 中执行 window.applicationCache.status，返回值为 1（UNCACHED）说明未启用；2（IDLE）表示已缓存且无更新；3（CHECKING）或 4（DOWNLOADING）说明正在检查或更新缓存
查看 Application > Cache Storage（Chrome）或 Resources > Application Cache（旧版 Safari/Firefox）中是否有对应 origin 的缓存条目

常见 Manifest 不生效的典型原因

即使写了 manifest="app.manifest"，也极大概率不工作——HTML5 AppCache 已被现代浏览器逐步弃用，且对路径、MIME 类型、HTTPS 等极为敏感。

manifest 文件必须返回 text/cache-manifest MIME 类型，Nginx/Apache 需显式配置（例如 Apache： AddType text/cache-manifest .manifest）
清单文件路径必须与 HTML 页面同源，且相对路径以页面为基准解析（manifest="cache.manifest" 是相对于 HTML URL，不是当前目录）
清单文件第一行必须是 CACHE MANIFEST（严格大小写，无 BOM，无空格前缀）
HTTP 环境下，若页面通过 file:// 打开，AppCache 完全禁用；HTTPS 下部分浏览器（如 Chrome 94+）已彻底移除支持

用 JavaScript 监听 Manifest 生命周期事件

靠手动刷 Network 面板太被动，用事件监听才能确认实际行为。注意：这些事件仅在 AppCache 启用且解析成功后触发。

if (window.applicationCache) {
  const appCache = window.applicationCache;

  appCache.addEventListener('cached', () => console.log('缓存完成'));
  appCache.addEventListener('updateready', () => {
    if (appCache.status === appCache.UPDATEREADY) {
      appCache.swapCache(); // 切换到新缓存
      location.reload();
    }
  });
  appCache.addEventListener('error', (e) => console.error('AppCache error:', e));
}

事件只在 status 为 1 以外时才可能触发；若始终是 1，说明根本没加载 manifest
checking 事件触发，代表浏览器已成功获取 manifest 并开始比对；没这个事件，基本可断定 manifest 路径错、404 或 MIME 错
Chrome 94+、Firefox 85+、Safari 16.4+ 已移除 window.applicationCache，调用会报 ReferenceError

替代方案比修复 Manifest 更现实

Manifest 缓存机制已被标准废弃，W3C 已将其标记为 obsolete。现在判断“是否离线可用”，应该转向 Service Worker + Cache API。

检测 Service Worker 是否注册成功：navigator.serviceWorker.controller !== null（控制当前页面）或 registration.active（已激活）
检查资源是否命中 Cache API：await caches.match('/index.html') 返回 Response 对象即表示已缓存
Manifest 的离线 fallback 逻辑（如 FALLBACK: 段）无法在 Service Worker 中直接复现，需在 fetch 事件里手动实现

真正需要离线能力时，别花时间 debug Manifest 的 404 或 MIME 错误——它在绝大多数新项目里已经不是“能不能用”的问题，而是“根本不被支持”的事实。