Service Worker安装监听器fetch报错及sw-precache初次加载异常问题

我来帮你拆解这个问题——这种初次加载时的TypeError: Failed to fetch在使用sw-precache的场景里其实挺常见的，主要和Service Worker的生命周期以及资源缓存的时序冲突有关，下面给你分析原因和对应的解决办法：

1. Service Worker安装阶段的资源竞态冲突 #

当你初次访问页面时，浏览器同时在做两件事：加载页面本身的资源，以及注册并安装Service Worker。sw-precache生成的SW会在install事件里批量缓存配置好的资源，但如果此时页面已经在请求某个资源，SW的fetch拦截逻辑可能会和浏览器的原生请求产生冲突，导致其中一个请求失败。
另外，install事件有隐性的超时限制，初次加载时如果要缓存的资源较多，可能在缓存全部完成前，页面的fetch请求就已经触发，此时SW还未准备好缓存，就会抛出错误。

2. 缓存未完成前的拦截逻辑缺陷 #

sw-precache默认的缓存策略是cacheFirst（优先从缓存取资源），但初次安装时缓存还在构建过程中，当某个请求过来时，缓存里还没有对应的资源，且网络请求可能因为SW的拦截逻辑出现异常，最终触发Failed to fetch。

1. 调整问题资源的缓存策略 #

给初次加载容易失败的资源设置networkFirst策略，优先走网络请求，避免缓存未就绪时的错误。在sw-precache的配置文件里添加：

module.exports = {
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/localhost:9001\/path\/to\/your-problematic-file/,
      handler: 'networkFirst',
      options: {
        cacheName: 'dynamic-resources-cache',
      },
    },
  ],
};

2. 确保SW安装完成后立即激活 #

检查sw-precache生成的Service Worker代码，确认install事件里有等待缓存完成并跳过等待的逻辑（一般工具会自动生成，但可以手动确认）：

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll(precacheManifest);
    }).then(() => self.skipWaiting())
  );
});

skipWaiting()能让新SW立即激活，避免等待旧SW被销毁，减少时序冲突的概率。

3. 给fetch添加错误兜底逻辑 #

在SW的fetch事件里捕获错误，当网络请求失败时，尝试用缓存兜底（如果有）或者返回默认响应，避免中断后续请求：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      // 优先用缓存，没有则走网络，网络失败返回离线兜底页
      return cachedResponse || fetch(event.request).catch(() => {
        return caches.match('/offline-fallback.html');
      });
    })
  );
});

4. 检查预缓存清单的有效性 #

确认sw-precache生成的precacheManifest里的所有资源URL都是正确可访问的，有时候清单里包含了不存在的资源，会导致缓存安装失败，进而影响后续的fetch逻辑。

这种问题本质上是初次加载时SW缓存构建和页面资源请求的时序冲突，通过调整缓存策略、完善错误处理，基本就能解决。

内容的提问来源于stack exchange，提问作者neonguru