使用Service Worker缓存时网页离线加载缓慢的原因排查

核心问题 #

你的Service Worker出现启动超时（ServiceWorker startup timed out）的根本原因如下：

• 未在install阶段预缓存所有必需资源，而是依赖每次请求时动态缓存，导致Service Worker处理大量并发请求时负载过高，阻塞启动流程。
• fetch事件中缓存资源的异步操作未被event.waitUntil()包裹，可能引发Worker状态异常。
• install事件中直接调用self.skipWaiting()未绑定到event.waitUntil()，激活时机不合理，干扰Worker初始化。
• 旧缓存清理逻辑存在冗余，Promise.all中混入无效Promise（缓存名匹配时无返回值），拖慢激活流程。

修复后的Service Worker代码 #

const CACHE_NAME = "webedit-testing-v2";
// 替换成你需要预缓存的所有文件路径
const PRECACHE_ASSETS = [
  '/',
  '/index.html',
  '/css/style.css',
  '/js/app.js',
  // 补充剩余20个资源的路径...
];

self.addEventListener('install', event => {
  console.log("Service worker: Installed.");
  // 预缓存所有资源，确保安装完成后再进入激活阶段
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE_ASSETS))
      .then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', event => {
  console.log('Service worker: Activated.');
  event.waitUntil(
    caches.keys().then(cacheNames => {
      // 过滤出需要删除的旧缓存，避免无效Promise
      return Promise.all(
        cacheNames.filter(cache => cache !== CACHE_NAME)
          .map(cache => {
            console.log('Service worker: Deleting old caches.', cache);
            return caches.delete(cache);
          })
      );
    }).then(() => self.clients.claim()) // 立即控制所有打开的客户端
  );
});

self.addEventListener('fetch', event => {
  console.log(`Service worker: Fetching ${event.request.url}`);
  // 采用缓存优先策略（适配离线场景），可按需改为网络优先
  event.respondWith(
    caches.match(event.request)
      .then(cachedRes => {
        // 缓存存在则直接返回，后台异步更新缓存
        if (cachedRes) {
          fetch(event.request).then(networkRes => {
            caches.open(CACHE_NAME).then(cache => {
              cache.put(event.request, networkRes.clone());
            });
          });
          return cachedRes;
        }
        // 无缓存时请求网络并缓存结果
        return fetch(event.request).then(networkRes => {
          caches.open(CACHE_NAME).then(cache => {
            cache.put(event.request, networkRes.clone());
          });
          return networkRes;
        }).catch(() => {
          // 离线且无缓存的降级处理（可选）
          return new Response('离线状态下无可用缓存');
        });
      })
  );
});

关键修改说明 #

1. 预缓存资源：在install阶段通过cache.addAll()一次性缓存所有24个资源，避免运行时动态缓存的开销，确保Service Worker启动时资源已就绪。
2. 规范异步操作：所有缓存相关的异步操作都用event.waitUntil()包裹，保证Service Worker完成关键操作后才进入下一生命周期阶段。
3. 优化缓存清理：用filter筛选需删除的旧缓存，避免Promise.all混入无效Promise，提升激活阶段效率。
4. 合理请求策略：采用缓存优先策略，优先返回缓存资源，后台异步更新；也可根据业务需求改为网络优先（先请求网络，失败再用缓存）。
5. 立即控制客户端：激活阶段调用self.clients.claim()，确保新Worker立即接管所有打开的页面，避免新旧Worker冲突。

额外排查步骤 #

• 打开浏览器DevTools的Application > Service Workers面板，检查Worker状态，确认无重复注册或旧Worker残留。
• 验证PRECACHE_ASSETS中的路径正确性，可在Cache Storage中查看缓存资源是否完整。
• 测试前先注销旧Worker、清空缓存，再重新加载页面，确保新Worker生效。

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