HTML中如何使用manifest文件实现离线缓存-html教程-PHP中文网

manifest文件在2026年5月已完全失效，chrome 95+、firefox 85+、safari 16.4+均静默忽略html manifest属性；替代方案唯一且必须是service worker，需https或localhost环境注册，显式缓存与拦截fetch请求。

html中如何使用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。它不是“另一种选择”，而是当前唯一标准化、全平台支持的机制。关键步骤不能跳过：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

页面必须通过 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))
  );
});