Service Worker更新未被检测到的异常问题排查求助

1. 强制服务器禁用service-worker.js的HTTP缓存 #

浏览器检查Service Worker更新时，若服务器返回304（未修改），会直接使用本地缓存的旧脚本，这是核心问题。需配置服务器对service-worker.js的响应头，确保浏览器每次都验证脚本是否更新：

• 设置Cache-Control: no-cache, no-store, must-revalidate（完全禁止缓存）
• 或设置Cache-Control: max-age=0, must-revalidate（每次请求都强制验证）
• 同时确保ETag或Last-Modified头能正确反映脚本内容变化，避免误返回304

2. 主动触发Service Worker更新检查 #

默认情况下浏览器仅在页面首次加载时检查一次，且受缓存影响。需在页面加载时主动调用更新检查，并监听更新事件：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register(`${window.location.origin}/service-worker.js`);
      
      // 主动触发更新检查
      await registration.update();
      
      // 监听更新可用事件
      registration.addEventListener('updatefound', () => {
        const newWorker = registration.installing;
        newWorker.addEventListener('statechange', () => {
          if (newWorker.state === 'installed') {
            // 若已有激活的SW，提示用户刷新
            if (navigator.serviceWorker.controller) {
              console.info('发现Service Worker新版本，请刷新页面生效');
              // 此处可添加UI提示，比如弹出通知引导用户刷新
            }
          }
        });
      });
    } catch (err) {
      console.error('Service Worker注册/更新失败:', err);
    }
  });
}

3. 优化Service Worker生命周期处理 #

确保新SW能跳过等待并立即控制所有客户端：

// service-worker.js
self.addEventListener('install', (event) => {
  // 缓存新资源后立即跳过等待
  event.waitUntil(
    caches.open('app-v3') // 注意修改缓存版本号
      .then(cache => cache.addAll(['/', '/index.html', ...]))
      .then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', (event) => {
  // 删除旧缓存并接管所有打开的页面
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => name !== 'app-v3').map(name => caches.delete(name))
      );
    }).then(() => self.clients.claim())
  );
});

4. 额外排查点 #

• 检查Chrome DevTools的Application > Service Workers面板，确认是否勾选了Update on reload（本地开发时可能自动开启，远程环境需手动触发更新逻辑）
• 验证服务器返回的ETag值：修改service-worker.js后，ETag应同步变化，避免因服务器配置问题导致ETag未更新
• 确保注册路径与脚本实际位置一致，避免因路径问题加载错误版本的脚本

内容的提问来源于stack exchange，提问作者Flament Mickaël