Chrome中Service Worker Sync事件断网后仍立即触发的问题排查

问题场景 #

我最近在Chrome 66.0.3359.181（64位）环境下测试Service Worker后台同步功能时遇到了一个奇怪的问题：明明断开了WiFi，sync事件却还是会立即触发，完全不符合“离线保存、联网后同步”的预期逻辑。当时运行的代码如下：

navigator.serviceWorker.ready
  .then(sw => {
    addData('sync-posts', post)
      .then(() => {
        return sw.sync.register('sync-new-posts');
      })
      .then(() => {
        var snackbarContainer = document.querySelector('#confirmation-toast');
        const data = {message: 'Your post was saved for syncing!'};
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
      })
      .catch(err => {
        console.log(err);
      });
  })

问题原因及解决方法 #

在梳理问题的过程中，我找到了两个关键原因，这里分享给同样踩坑的开发者：

1. Docker VM网络适配器干扰浏览器网络状态判断 #

启用Docker的虚拟机网络适配器后，Chrome会误判设备处于联网状态，所以直接触发了sync事件，没有进入离线等待流程。解决办法很简单：测试离线场景时，暂时禁用Docker的VM网络适配器，或者关闭Docker相关的网络服务，让浏览器能准确识别到真实的离线状态。

2. 错误处理不当导致重试机制失效 #

另外还发现一个容易忽略的细节：当sync事件执行失败时，必须主动抛出错误才能触发浏览器的重试机制。我之前的代码只是捕获错误并打印日志（console.log(err)），这种情况下Service Worker会认为同步任务已经完成，不会进行重试。正确的错误处理应该是抛出异常，示例如下：

.catch(err => {
  console.error('Sync failed:', err);
  throw err; // 抛出错误，触发浏览器的同步重试逻辑
});

这样修改后，就能确保网络恢复后，浏览器会自动重新尝试执行同步任务。

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