Background Sync API 是 Chrome、Edge 等主流浏览器唯一稳定支持的后台同步机制，它在网络恢复后自动执行一次同步任务，适用于订单提交等场景；需通过 Service Worker 注册唯一标签并配合 IndexedDB、幂等接口与降级策略保障可靠性。
Background Sync API 是目前 HTML5 中唯一被主流浏览器（Chrome、Edge）稳定支持的后台同步机制，它不依赖用户是否打开页面，只要 Service Worker 激活、设备联网，浏览器就会在合适时机自动触发同步任务。它不是“定时执行”，而是“网络恢复后尽快执行一次”，非常适合订单提交、消息发送、编辑记录上传等场景。
注册同步任务（主线程）
用户操作触发待同步行为时（如点击提交按钮），先将数据存入 IndexedDB，再注册同步任务：
- 必须确保已注册并激活 Service Worker，且页面运行在 HTTPS 或 localhost 环境下
- 调用 navigator.serviceWorker.ready 等待就绪，再调用 registration.sync.register('sync-orders')
- 标签名（如 'sync-orders'）需全局唯一，同一标签多次注册只保留最后一次，适合按业务模块区分
- 无需手动判断网络状态——注册本身不发请求，失败也不会报错；浏览器会在后续联网时自动调度
在 Service Worker 中处理同步逻辑
sw.js 文件中监听 sync 事件，从 IndexedDB 读取待同步数据并发起请求：
- 使用 event.waitUntil() 包裹整个异步流程，确保浏览器知道任务何时完成
- 根据 event.tag 匹配注册时的标签名，例如 if (event.tag === 'sync-orders')
- 打开 IndexedDB，查询 status: 'pending' 的记录，按时间顺序逐条 POST 到服务端接口
- 每条成功后更新其 status 为 'synced'；失败则保留 'pending'，浏览器会在后续自动重试（默认最多 2 次，不可配置）
保障数据可靠性与用户体验
单靠 Background Sync 不足以构成完整同步链路，需配合其他机制：
立即学习“前端免费学习笔记（深入）”；
- 所有写入 IndexedDB 的操作必须封装在事务中，并包含唯一 client ID 和时间戳，避免重复或乱序
- 服务端接口必须支持幂等：接收客户端生成的订单 ID 或操作 ID，用数据库唯一约束或 UPSERT 实现“有则更新、无则插入”
- 前端 UI 应实时响应网络变化：监听 window.addEventListener('online', ...) 并结合 fetch 尝试兜底，但不能只依赖该事件（它可能丢失或误报）
- 用户提交失败时，立即写库 + 显示「已暂存，网络恢复后自动提交」，并提供「查看/重试暂存项」入口
注意兼容性与常见陷阱
Background Sync 目前仅在 Chrome、Edge 及部分基于 Chromium 的浏览器中可用，Firefox 和 Safari 尚未实现。实际开发中需做降级处理：
- 注册前先检测：if ('sync' in registration)，否则退回到页面可见时主动拉取的策略
- 不要在 sync 事件中执行耗时计算或大量 DOM 操作——Service Worker 无 DOM 访问权限，且长时间阻塞可能导致任务被终止
- IndexedDB 打开和读写都是异步的，务必用 Promise 或 async/await 正确串联，避免未等待完成就结束 waitUntil
- 同步失败不会抛出 JS 异常，需检查 fetch 响应状态码和 body 解析结果，失败时明确标记记录而非静默跳过
