Background Sync API：离线重试与联网恢复

---

title: Background Sync API：离线重试与联网恢复

keywords:

• SyncManager
• registration.sync.register
• sync 事件
• 重试
• 离线

description: 使用 Background Sync 在网络恢复时自动重试任务，提升离线场景的可靠性，包含主线程注册与 Service Worker 处理示例。

categories:

• 应用软件
• 主题壁纸

---

概述

Background Sync 允许在网络恢复后自动触发 sync 事件执行任务（如队列发送）。需要注册 Service Worker 并在主线程调用 registration.sync.register(tag)。

用法/示例

// 主线程：登记同步任务
const reg = await navigator.serviceWorker.register('/sw.js')
await reg.sync.register('sync-orders')

// sw.js
self.addEventListener('sync', e => {
  if (e.tag === 'sync-orders') {
    e.waitUntil(flushPendingOrders())
  }
})

工程建议

• 为任务设计幂等与去重，避免重复提交；与 IndexedDB/CacheStorage 协作持久化队列。
• 对失败进行退避重试与上限限制，记录结果用于可观测性与审计。
• 在不支持环境使用前台“发送失败可重试”或应用内轮询降级。

参考与验证

• MDN：SyncManager — https://developer.mozilla.org/docs/Web/API/SyncManager
• web.dev：Background Sync — https://web.dev/articles/background-sync