本文深入解析了HTML中Service Worker实现健壮离线缓存的关键实践与常见陷阱：不仅涵盖注册、安装和fetch拦截的基础步骤，更重点揭示了盲目使用`caches.match(event.request)`导致POST提交静默失败、登录请求异常及API数据错乱的根本原因——即未按`event.request.destination`精准分流处理；同时强调install阶段应优先选用可控的`cache.put()`而非脆弱的`cache.addAll()`，并系统性指出离线空白页的本质是HTML依赖资源（JS/CSS/图片/动态模块）未完整预缓存，最后通过destination判断+URL模式匹配，给出HTML缓存优先、静态资源缓存兜底、API谨慎回退缓存的分层策略，真正让PWA离线体验既可靠又符合业务逻辑。

为什么直接 caches.match(event.request) 会出问题

这行代码看似能兜底所有请求，但实际会让 POST 表单提交静默失败、带 credentials: 'include' 的登录请求返回空响应，甚至把 API 接口也从缓存里硬塞给用户。根本原因是它不区分请求类型——fetch('/api/login', { method: 'POST' }) 和 fetch('/app.js') 都被当成普通资源去匹配缓存，而缓存里根本没有 POST 响应。

真正该做的，是按 event.request.destination 分流：

• event.request.destination === 'document' → 必须处理，否则离线打不开页面
• event.request.destination === 'script' 或 'style' 或 'image' → 可安全缓存，优先返回
• event.request.destination === 'json' 或 'empty' → 不该走缓存，直接 fetch(event.request)

install 阶段该用 cache.addAll() 还是 cache.put()

cache.addAll() 简洁，但极其脆弱：列表里只要一个资源 404 或跨域失败，整个缓存就中断，什么都不会写入。适合打包后路径绝对稳定的项目（比如构建输出的 /static/js/main.8a2b.js）。

cache.put() 更可控，尤其适合处理 HTML 页面本身：

• 对 index.html，可用 new Response('

  Offline

  ', { headers: { 'Content-Type': 'text/html' } }) 构造 fallback 响应，避免白屏
• 对图片或字体这类非关键资源，可捕获 fetch 错误后跳过，不中断 install 流程
• 注意：cache.put() 的 Request 参数必须和后续 fetch() 的 URL 完全一致（含大小写、查询参数）

离线时 HTML 能打开，但页面空白或功能缺失怎么办

这是最典型的缓存不完整现象，控制台报 Failed to load resource: net::ERR_FAILED，本质是只缓存了 /index.html，却漏了它依赖的 /app.js 或 /style.css。

正确做法是把 HTML 及其所有直接依赖一并列进预缓存列表：

• 路径必须是相对根路径，比如 ['/', '/style.css', '/app.js', '/logo.png']，其中 / 就是 index.html
• 不要缓存带查询参数的 URL（如 /data.json?v=1.2），不同参数会被视为不同键，缓存空间很快爆掉
• 如果 HTML 里有动态加载的模块（比如 import('./feature.js')），这些路径也得手动加进缓存列表，否则离线时 import 失败

fetch 事件里怎么让 HTML 走缓存又不让 API 走缓存

核心是两层判断：先看 destination，再看 URL 模式。例如：

self.addEventListener('fetch', event => {
  const { request } = event;
  if (request.destination === 'document') {
    // 页面 HTML：缓存优先，无则 fallback
    event.respondWith(
      caches.match(request).then(r => r || caches.match('/offline.html'))
    );
  } else if (request.destination === 'script' || request.destination === 'style') {
    // JS/CSS：缓存优先，无则网络
    event.respondWith(
      caches.match(request).then(r => r || fetch(request))
    );
  } else if (request.url.startsWith(self.location.origin + '/api/')) {
    // API：网络优先，失败才回退缓存（谨慎！）
    event.respondWith(
      fetch(request).catch(() => caches.match(request))
    );
  }
});

这里容易被忽略的是：API 回退缓存必须有明确业务语义（比如商品列表可展示旧数据），不能无差别套用。否则用户刷新页面看到的永远是昨天的订单状态。

本篇关于《HTML Service Worker 实现离线缓存策略的步骤如下：注册 Service Worker 在主 JavaScript 文件中注册 Service Worker，确保页面加载时激活它。if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(function(registration) { console.log('Service Worker 注册成功:', registration); }).catch(function(err) { console.log('Service Worker 注册失败:', err); }); }创建 Service Worker 文件 (sw.js) 创建一个名为 sw.js 的文件，并在其中编写处理网络请求的逻辑。拦截网络请求并缓存响应 使用 fetch 事件拦截网络请求，并根据需要缓存响应。以下是一个简单的示例： self.addEventListener('fetch', function(event) { // 拦截所有 GET 请求 if (event.request.method === 'GET') { event.respondWith( // 先尝试从缓存中获取资源 caches.match(event.request).then(function(response) { // 如果缓存中存在，直接返回 if (response) { return response; } // 否则从网络获取 return fetch(event.request).then(function(networkResponse) { // 将网络响应缓存起来 return caches.open('my-cache').then(function》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！