如何利用 Service Worker 的 background-sync API 实现离线提交数据的后台自动重试-js教程-PHP中文网

background sync api 不能在断网时自动重试，仅在网络恢复且 service worker 活跃时触发 sync 事件；需配合 indexeddb 持久化请求数据，并在 sync 事件中重建并发送。

如何利用 service worker 的 background-sync api 实现离线提交数据的后台自动重试

Service Worker 的 Background Sync API 可以在用户恢复网络连接后，自动触发一次或多次后台同步任务，非常适合实现“离线提交、联网重试”的数据提交逻辑。它不依赖页面是否打开，只要 Service Worker 处于激活状态且浏览器支持，就能可靠执行。

前提条件与浏览器兼容性

Background Sync 目前仅在 Chrome、Edge（基于 Chromium）和部分 Android WebView 中稳定支持，Firefox 和 Safari 尚未实现。使用前需检查 navigator.serviceWorker.ready 和 registration.sync 是否可用：

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(reg => {
    if (reg.sync) {
      // 可以注册 sync 事件
    }
  });
}

注册同步任务（sync registration）

当用户点击提交但网络不可用时，先将待提交的数据存入 IndexedDB，再调用 registration.sync.register() 请求一次后台同步：

同步标签（tag）必须是字符串，用于标识任务类型，例如 'submit-order'；同一 tag 在未完成前重复注册会被忽略；
注册本身不立即执行同步，只向浏览器发出“稍后请帮我触发一次该 tag 的 sync 事件”请求；
建议在注册前确保 Service Worker 已激活，并避免在非安全上下文（HTTP）中使用（HTTPS 或 localhost 才允许）。

在 Service Worker 中监听 sync 事件

在 Service Worker 脚本中监听 sync 事件，从中读取 IndexedDB 数据并尝试提交：

使用 event.waitUntil(promise) 确保浏览器知道任务开始且等待其完成；
若提交成功，从 IndexedDB 删除对应记录；失败则可选择保留、标记重试次数、或丢弃（视业务而定）；
注意：sync 事件中无法访问 window 或 DOM，所有操作需通过 caches、indexedDB、fetch 完成；
不要在 sync 回调里写无限重试逻辑——浏览器只保证“至少一次”，不保证“多次”。如需指数退避或多次重试，应由前端逻辑控制注册时机（比如失败后延迟几秒再注册新 sync）。

self.addEventListener('sync', event => {
  if (event.tag === 'submit-order') {
    event.waitUntil(
      handlePendingOrders().catch(err => {
        console.error('Sync failed:', err);
        // 可选：记录失败，或稍后重新注册
      })
    );
  }
});