Safari中Service Worker的FetchEvent.respondWith失效问题排查

问题背景 #

为验证Service Worker工作机制，搭建了包含两个作用域重叠的Service Worker的Demo：

• /test_sw1.js：作用域默认覆盖根目录
• /subdir/test_sw2.js：作用域默认覆盖/subdir/目录
  两者均拦截所有.json后缀的请求并返回模拟数据，其他请求转发至实际服务器。

在Chrome和Firefox中运行符合预期：首次加载.json请求返回404，刷新后由test_sw1.js返回模拟数据；但在Safari中，无论操作多少次，.json请求始终返回默认响应（404或真实文件内容）。进一步排查发现，Safari中Service Worker已输出匹配成功日志（REGEX MATCH SUCCEEDED），但FetchEvent.respondWith()调用完全无效果，直接访问/subdir/test.json时，test_sw2.js的匹配日志已输出，但浏览器仍显示404页面，且控制台无任何报错信息。

可能原因与解决方案 #

1. 确保Service Worker处于激活状态并接管客户端 #

Safari对Service Worker的激活流程和作用域优先级处理与Chrome/Firefox存在差异，尤其是多个SW作用域重叠时，未激活的SW无法处理请求：

• 在Safari开发者工具的Storage > Service Workers面板中，检查目标SW的状态，必须处于activated状态（而非waiting或installed）
• 在SW脚本中添加skipWaiting()和clients.claim()，确保SW激活后立即接管所有受控客户端：

  self.addEventListener('install', event => {
    event.waitUntil(self.skipWaiting());
  });
  
  self.addEventListener('activate', event => {
    event.waitUntil(self.clients.claim());
  });
  

2. 验证FetchEvent处理逻辑的正确性 #

即使匹配日志输出，也可能是响应构造或Promise处理存在隐性问题：

• 确保respondWith()中的响应构造正确，必须设置合适的Content-Type头，避免Safari无法识别响应：

  self.addEventListener('fetch', event => {
    if (/\.json$/.test(event.request.url)) {
      console.log('REGEX MATCH SUCCEEDED');
      const mockResp = new Response(JSON.stringify({mock: 'data'}), {
        headers: {'Content-Type': 'application/json; charset=utf-8'}
      });
      event.respondWith(Promise.resolve(mockResp));
    } else {
      event.respondWith(fetch(event.request));
    }
  });
  

• 添加错误捕获逻辑，排查可能被Safari吞掉的异常：

  event.respondWith(
    (async () => {
      try {
        return new Response(JSON.stringify({mock: 'data'}), {status: 200});
      } catch (err) {
        console.error('Fetch handler error:', err);
        return new Response(JSON.stringify({error: 'failed'}), {status: 500});
      }
    })()
  );
  

3. 清除Safari中残留的Service Worker缓存与注册信息 #

Safari的Service Worker缓存可能存在残留，导致新的SW逻辑无法生效：

• 打开Safari偏好设置 > 隐私 > 管理网站数据，找到当前域名，删除所有相关缓存和Service Worker数据
• 或在开发者工具的Storage > Service Workers面板中，点击Unregister删除所有已注册的SW，然后重新加载页面

4. 检查Safari的Service Worker相关设置 #

• 确保开发者工具中的Disable Service Workers选项未被勾选
• 避免在隐私模式下测试，隐私模式下Safari对Service Worker有额外的行为限制

5. 明确指定Service Worker的作用域 #

注册SW时显式指定作用域，避免默认作用域的歧义：

• 注册根目录SW：

  navigator.serviceWorker.register('/test_sw1.js', {scope: '/'})
    .then(reg => console.log('Root SW registered:', reg));
  

• 注册子目录SW：

  navigator.serviceWorker.register('/subdir/test_sw2.js', {scope: '/subdir/'})
    .then(reg => console.log('Subdir SW registered:', reg));
  

• 建议在DOMContentLoaded事件触发后再注册SW，避免页面加载时的竞争条件：

  document.addEventListener('DOMContentLoaded', () => {
    // 注册SW的逻辑
  });
  

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