Background Sync 与 Periodic Background Sync：离线任务重试与后台刷新实践

# 背景与价值 - 离线或不稳定网络下的任务可靠性是 PWA 关键能力；后台同步在网络可用时自动重试失败任务。 - 周期性后台刷新在应用未前台时保持轻量数据更新，需谨慎申请与治理。 # 注册后台同步（前台脚本） ```ts async function registerSync(tag = 'upload-queue') { const reg = await navigator.serviceWorker.ready; await (reg as any).sync.register(tag); } async function registerPeriodicSync(tag = 'refresh-feed', minInterval = 12 * 60 * 60 * 1000) { const reg = await navigator.serviceWorker.ready; if ('periodicSync' in reg) { await (reg as any).periodicSync.register(tag, { minInterval }); return { ok: true }; } return { ok: false, reason: 'unsupported' }; } ``` # Service Worker：队列与事件处理 ```ts const queueKey = 'pending-uploads'; self.addEventListener('sync', (event: any) => { if (event.tag === 'upload-queue') { event.waitUntil(flushQueue()); } }); self.addEventListener('periodicsync', (event: any) => { if (event.tag === 'refresh-feed') { event.waitUntil(refreshFeed()); } }); async function flushQueue() { const items = await readQueue(); for (const item of items) { try { const res = await fetch('/api/upload', { method: 'POST', body: item.body }); if (res.ok) await markDone(item.id); } catch {} } } async function refreshFeed() { try { const res = await fetch('/api/feed'); if (res.ok) { const data = await res.json(); await cacheFeed(data); } } catch {} } ``` # 权限与兼容 - 需安装 PWA 且具备通知/站点参与度；周期性同步可受平台策略限制。 - 回退：在前台以 `setInterval` 轻量刷新；离线重试使用指数退避的前台调度。 # 验证指标（Chrome 128/Android，PWA 已安装） - 离线任务成功率：网络恢复后重试成功 ≥ 98%。 - 重试延迟（P95）：网络恢复到完成 ≤ 5s。 - 周期刷新能耗：每天 1 次刷新能耗增加 ≤ 2%（抽样设备）。 - 后台稳定性：长驻 24h 无异常崩溃与队列阻塞。 # 测试清单 - 人为断网：前台提交任务入队，恢复后自动重试并成功。 - 大量任务：并发 50 条以内逐步清空，服务器限速下仍稳定。 - 周期刷新：最小频率遵守策略，内容更新后前台可见。 # 应用场景 - 离线笔记/表单提交、媒体上传、消息草稿同步、轻量订阅源刷新。