HTML网页添加离线缓存清单配置的代码-html教程-PHP中文网

manifest文件是旧版html5离线缓存机制，chrome 94+、firefox 84+、edge 94+已彻底移除支持，调用window.applicationcache会报错，且浏览器不再解析manifest属性；当前唯一可行替代方案是service worker + cache api，需通过https注册、预缓存关键资源、拦截fetch请求并优先返回缓存。

html网页添加离线缓存清单配置的代码

什么是 `manifest` 文件，现在还能用吗？不能用了。`manifest` 是旧版 HTML5 的离线缓存机制，Chrome 94+、Firefox 84+、Edge 94+ 已彻底移除支持，调用 `window.applicationCache` 会报 `ReferenceError`，且浏览器不再解析 `manifest` 属性。强行配置只会让页面加载失败或被忽略。

真正可行的替代方案是 Service Worker + Cache API，这是当前唯一被广泛支持的离线缓存标准。

怎么用 `Service Worker` 实现页面离线可用？核心流程：注册 SW 脚本 → 在 SW 中监听 `install` 和 `fetch` 事件 → 预缓存关键资源 → 拦截网络请求并优先返回缓存。

实操要点：

必须通过 HTTPS（或 localhost）启用，HTTP 站点无法注册 Service Worker
service-worker.js 需和页面同源，且建议放在站点根目录（否则作用域受限）
注册代码要放在页面 JS 中，且最好在 DOMContentLoaded 后执行

示例注册代码（放在 <script></script> 标签内）：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .catch(err => console.log('SW 注册失败:', err));
  });
}

`service-worker.js` 怎么写才不踩坑？常见错误：缓存未命中直接失败、忽略 `waitUntil` 导致 install 失败、没处理动态路由、忘记更新缓存版本。

关键写法：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

用 CACHE_NAME 带版本号（如 'v1.2-cache'），每次更新缓存策略时改版本，避免旧缓存残留
self.skipWaiting() 和 clients.claim() 配合使用，确保新 SW 立即接管页面
fetch 事件中优先 match 缓存，未命中再 fetch 网络，最后兜底返回 Response.error() 或 fallback 页面
静态资源路径建议用相对路径（如 '/index.html'、'/css/app.css'），避免硬编码域名

最小可用 service-worker.js 示例：

const CACHE_NAME = 'v1-cache';
const urlsToCache = [
  '/',
  '/index.html',
  '/css/app.css',
  '/js/main.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(keys
        .filter(key => key !== CACHE_NAME)
        .map(key => caches.delete(key))
      );
    })
  );
});

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

调试 `Service Worker` 时最常遇到的问题

现象包括：页面刷新后仍走网络、缓存没生效、SW 状态卡在 waiting、控制台报 Failed to register a ServiceWorker。

检查浏览器 DevTools → Application → Service Workers：确认是否已注册、是否激活、是否有错误日志
“Update on reload” 必须勾选，否则改了 SW 代码也不会重装
如果 SW 处于 waiting 状态，说明有新版本但没触发 skipWaiting，手动点击 “Skip Waiting” 或在 activate 事件里加 self.skipWaiting()
缓存匹配失败常因请求 URL 和缓存键不一致（比如带 query 参数但没缓存带参版本），可用 new Request(url, { ignoreSearch: true }) 控制匹配逻辑
注意 fetch 事件无法拦截 iframe、<link rel="stylesheet"> 等跨域请求（CORS 限制），这类资源需确保可被缓存且响应头含 Cache-Control