MSW.js 中 Chrome 浏览器空闲时 Service Worker 自动注销问题解析

问题背景

在 Web 开发中，Mock Service Worker (MSW) 是一个流行的 API 模拟库，它通过 Service Worker 技术来拦截网络请求。然而，近期有开发者报告在 Chrome 浏览器中遇到一个特殊问题：当页面处于空闲状态约5分钟后，MSW 会停止拦截请求。

技术原理分析

Service Worker 是浏览器在后台运行的脚本，独立于网页，可以用来拦截和处理网络请求。Chrome 浏览器对 Service Worker 有一个内置的终止策略：

1. 当 Service Worker 空闲超过30秒（从之前的5分钟缩短）
2. 当事件处理超过5分钟未完成
3. 当 Worker 忙于同步 JavaScript 且30秒内未响应 ping 请求

这种设计是为了优化资源使用，防止后台脚本消耗过多系统资源。

问题具体表现

在 MSW 的使用场景中，当 Chrome 浏览器标签页处于非活动状态约5分钟后：

1. Chrome 会终止 Service Worker 进程
2. 当用户返回页面并交互时，Chrome 会重新启动 Service Worker
3. 虽然 Service Worker 被重新激活，但 MSW 的拦截功能失效
4. 只有刷新页面才能恢复 MSW 的功能

根本原因

深入分析发现问题的核心在于：

1. Chrome 终止并重启 Service Worker 时，会创建一个新的 mockServiceWorker.js 实例
2. 新实例中 activeClientIds 集合被清空（存储已注册客户端ID的集合）
3. 重启过程中没有触发 MOCK_ACTIVATE 消息来重新注册客户端ID
4. 虽然 fetch 监听器仍然存在，但由于没有活跃客户端ID，请求拦截被跳过

临时解决方案

开发者发现可以通过手动发送 MOCK_ACTIVATE 消息来临时解决问题：

if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
  navigator.serviceWorker.controller.postMessage('MOCK_ACTIVATE');
  
  // 等待变更传播
  await new Promise((resolve) => {
    setTimeout(resolve, 10);
  });
}

await fetch('endpoint', {...});

这种方法强制重新注册客户端ID，使拦截功能暂时恢复。

潜在长期解决方案方向

从技术架构角度，更完善的解决方案可能需要：

1. 监听 Service Worker 的状态变化事件（如 controllerchange）
2. 在检测到 Service Worker 被重新激活时自动重新建立连接
3. 考虑使用更持久化的方式存储客户端注册信息
4. 实现更健壮的重连机制

浏览器差异说明

值得注意的是，这个问题主要出现在 Chromium 内核的浏览器（Chrome、Edge、Brave等），而 Firefox 则没有这个问题，这反映了不同浏览器对 Service Worker 生命周期管理的差异。

开发者应对建议

对于使用 MSW 的开发者，建议：

1. 在开发阶段注意这个问题，特别是在需要长时间调试时
2. 考虑在关键 API 调用前添加重连逻辑
3. 关注 MSW 官方对此问题的修复进展
4. 在测试策略中加入 Service Worker 状态变化的测试用例

这个问题不仅涉及 MSW 库本身，也反映了现代 Web 开发中 Service Worker 使用的一个常见挑战，值得广大前端开发者关注和理解。