PeriodicSync 已被主流浏览器弃用，Chrome 90+ 移除，Firefox/Safari 从未支持；应改用 online 事件监听、Push API、IndexedDB 缓存与 Background Fetch 等组合策略实现可靠离线同步。
PeriodicSync 是 HTML5 中一项实验性后台同步 API，但目前已被主流浏览器弃用或从未正式支持。Chrome 从 90 版本起移除了对 periodicSync 的支持，Firefox 和 Safari 从未实现。因此，你无法在当前生产环境中可靠使用 PeriodicSync 来保证离线数据的时效性。
为什么 PeriodicSync 不可用
该 API 原本设计用于让 Service Worker 在设备空闲、联网且充电时周期性唤醒执行同步任务（如拉取新消息），但存在明显局限：
- 依赖浏览器调度策略，实际触发时机不可控、不规律，甚至可能永不触发
- 需要用户授予“通知”权限（
Notificationspermission）才能注册，体验割裂 - 仅限安装了 PWA 的桌面 Chrome（旧版本），移动端完全不支持
- 2021 年起 Chromium 团队明确标记为 deprecated，2022 年彻底移除
替代方案：更实用的离线数据同步策略
要保障离线场景下数据的时效性，应采用组合式、主动+被动的设计：
-
前台触发同步：用户打开页面或切换到标签页时，立即检查网络并拉取增量更新（如用
fetch()+ Last-Modified / ETag / 时间戳比对） - 后台消息唤醒（Push API）：服务端通过 Web Push 发送轻量通知，Service Worker 收到后静默拉取关键数据（需用户授权推送）
- IndexedDB + 智能缓存策略：存储数据时记录本地更新时间与服务端版本号，下次联网时按需 diff 同步（避免全量拉取）
- Background Fetch（渐进替代）：适用于大文件下载等长耗时任务，虽非周期性，但可在后台稳定执行，Chrome 已支持
Service Worker 中可落地的同步逻辑示例
以下是在 sw.js 中实现一次“连接恢复即同步”的典型写法（无需 PeriodicSync）：
立即学习“前端免费学习笔记（深入）”；
// sw.js
self.addEventListener('online', () => {
// 网络恢复时尝试同步待上传数据
syncPendingData();
});
async function syncPendingData() {
const pending = await getCachedPendingRecords(); // 从 IndexedDB 读取未同步项
for (const record of pending) {
try {
await fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(record),
headers: { 'Content-Type': 'application/json' }
});
await markAsSynced(record.id); // 标记成功，从缓存中移除
} catch (e) {
// 失败保留，下次重试
console.warn('Sync failed for', record.id);
}
}
}
小结：务实比追逐实验性 API 更重要
离线数据时效性的核心不是“定时唤醒”，而是“最小延迟感知变化”和“可靠重试机制”。放弃已淘汰的 PeriodicSync，聚焦于网络状态监听、合理缓存设计、Push 驱动更新和 IndexedDB 本地状态管理，才能构建真正健壮的离线体验。
