为何页面显示Service Worker返回的JSON而非原文档？

DevOps 小满

2026-7-1

问题排查与解决建议

核心问题分析

你的问题本质是Service Worker的fetch事件拦截逻辑覆盖了页面资源请求，同时无效的fetch链接导致请求异常，进而影响了预期的响应捕获。

具体解决步骤

修正fetch事件的拦截范围
Service Worker默认会拦截所有同域请求，包括index.html本身。你需要在fetch事件回调里添加判断，只拦截目标MP3请求，放过页面资源：

self.addEventListener('fetch', (event) => {
  // 只拦截MP3相关请求，替换成你的目标路径规则
  if (event.request.url.includes('.mp3')) {
    event.respondWith(
      fetch('你的有效MP3地址')
        .then(response => {
          // 这里处理正常响应逻辑
          console.log('fetch响应:', response);
          return response;
        })
        .catch(err => {
          // 处理无效链接的异常，比如返回备用资源或提示
          console.error('请求失败:', err);
          return new Response(JSON.stringify({error: '资源不可用'}), {
            headers: {'Content-Type': 'application/json'}
          });
        })
    );
  } else {
    // 放过其他请求，比如index.html，让浏览器正常加载
    return fetch(event.request);
  }
});

确保Service Worker的更新与生效
1. 修改Service Worker代码后，在页面控制台执行navigator.serviceWorker.register('sw.js').then(reg => reg.update())强制更新
2. 关闭所有相关标签页后重新打开，确保旧的Service Worker被销毁
调试fetch响应的正确姿势
不要直接依赖页面console的全局捕获，应该在Service Worker的fetch回调里直接打印响应，或者在页面的fetch请求里添加catch逻辑：
```
// 页面端代码
fetch('目标MP3地址')
  .then(res => console.log('页面端捕获响应:', res))
  .catch(err => console.error('页面端捕获错误:', err));
```
处理无效链接的异常分支
因为你故意设置了无效链接，一定要在fetch的catch里处理异常，避免默认的失败响应影响页面渲染。如果需要返回JSON，也要确保只有在MP3请求失败时才返回，而不是所有请求。