Service Worker background-sync 使用教程

Service Worker 的 Background Sync API 为 Web 应用提供了优雅实现“离线提交、联网自动重试”的能力——它不依赖页面是否打开，而是在网络恢复且 Service Worker 活跃时精准触发一次后台同步任务，特别适合订单提交、表单保存等关键场景；但需注意其并非断网实时重试机制，必须配合 IndexedDB 持久化请求数据，并在 sync 事件中安全重建并发送，同时兼顾浏览器兼容性（仅 Chromium 系内核稳定支持）、注册时机控制、失败策略设计及 UI 协同反馈，才能构建真正可靠、用户无感的离线体验。

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);
        // 可选：记录失败，或稍后重新注册
      })
    );
  }
});

增强可靠性的小技巧

单纯依赖 sync 事件可能不够健壮，建议配合以下实践：

• 提交前先检测 navigator.onLine，在线则直接 fetch；离线再走 IndexedDB + sync 流程；
• 为每条待提交记录添加时间戳和重试计数字段，防止无限失败堆积；
• 在页面加载时主动检查 IndexedDB 中是否有未提交数据，如有且当前在线，可立即发起提交（不等 sync）；
• 对关键操作（如支付），同步完成后通过 postMessage 通知页面更新 UI 或提示用户。

以上就是《Service Worker background-sync 使用教程》的详细内容，更多关于的资料请关注golang学习网公众号！