---

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

tags: [Background Sync, Periodic Background Sync, Service Worker, 同步重试, 后台刷新]

description: 使用后台同步在网络恢复时可靠重试任务，并在支持环境下周期性刷新数据；提供权限与兼容治理、回退策略与经验证的成功率与能耗指标。

categories:

• 应用软件
• 主题壁纸

---

背景与价值

• 离线或不稳定网络下的任务可靠性是 PWA 关键能力；后台同步在网络可用时自动重试失败任务。
• 周期性后台刷新在应用未前台时保持轻量数据更新，需谨慎申请与治理。

注册后台同步（前台脚本）

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：队列与事件处理

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 条以内逐步清空，服务器限速下仍稳定。
• 周期刷新：最小频率遵守策略，内容更新后前台可见。

应用场景

• 离线笔记/表单提交、媒体上传、消息草稿同步、轻量订阅源刷新。