HTML5离线缓存怎么用manifest？

HTML 的 manifest 离线缓存机制已在2026年5月被所有主流浏览器（Chrome 95+、Firefox 85+、Safari 16.4+）彻底废弃并静默忽略，不再发起请求、不报错、也不生效——它已从标准和实现层面完全消失；如今唯一可靠、标准化且全平台支持的离线缓存方案是 Service Worker，必须通过 HTTPS 或 localhost 注册，显式控制安装、缓存、拦截与响应逻辑，任何试图兼容或过渡使用 manifest 的做法不仅无效，还会干扰调试和迁移进程。

直接说结论：manifest 文件在当前（2026年5月）已**完全失效**，主流浏览器（Chrome 95+、Firefox 85+、Safari 16.4+）均已移除支持，任何基于 html manifest="xxx.appcache" 的写法都不会触发缓存，也不会报错——它只是被静默忽略。

为什么 manifest 属性不再起作用

这不是配置错误，而是标准层面的移除。W3C 已将 Application Cache 标记为废弃（obsolete），浏览器厂商陆续执行了删除。你可能看到旧文档里还能跑，那大概率是本地开发服务器没刷新、或用了过时的浏览器内核（比如某些 Electron 封装版）。真实用户环境里，它已经不存在了。

• manifest 属性在 HTML 解析阶段被浏览器直接跳过，不会发起对 .appcache 文件的请求
• 即使服务器正确返回了 text/cache-manifest MIME 类型，浏览器也无视内容
• 开发者工具的 Application 面板中，“Manifest”选项卡已消失，只剩 Service Workers

sw.js 是唯一可行的替代方案

要实现离线访问，必须用 Service Worker。它不是“另一种选择”，而是当前唯一标准化、全平台支持的机制。关键步骤不能跳过：

• 页面必须通过 https:// 或 http://localhost 提供（file:// 协议不支持注册）
• 在主 JS 中调用 navigator.serviceWorker.register('sw.js')，且路径必须与页面同源
• sw.js 必须监听 install 事件并调用 cache.addAll() 预缓存资源列表
• 必须监听 fetch 事件，用 event.respondWith() 显式返回缓存或网络响应
• 更新缓存时，需在 activate 阶段调用 caches.delete() 清理旧 cache 名称

示例片段（sw.js）：

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('v1').then(cache => cache.addAll([
      '/',
      '/index.html',
      '/style.css',
      '/app.js'
    ]))
  );
});

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(r => r || fetch(e.request))
  );
});

旧项目迁移时最容易踩的坑

很多团队想“先保留 manifest，再慢慢切到 SW”，这行不通。二者互斥，且 manifest 的残留会干扰调试判断：

• 删掉所有 ，否则开发者工具里可能误判为“有缓存但没生效”
• 服务器上停用 AddType text/cache-manifest .appcache 这类配置，避免误导日志
• 不要指望 cache.addAll() 自动包含 HTML 页面本身——必须显式列出 / 或具体路径，否则离线时空白
• 缓存名称（如 'v1'）每次变更都要同步改 install 和 activate 里的逻辑，否则旧缓存永远留着

真正难的不是写几行 SW 代码，而是理解：缓存策略必须由你完全定义，浏览器不再替你做“默认行为”。一个没写 fetch 拦截的 SW，和没注册一样。

理论要掌握，实操不能落！以上关于《HTML5离线缓存怎么用manifest？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！