Service Worker通过Background Sync在页面关闭后仍可运行，适用于离线数据同步。需满足HTTPS、注册Service Worker、用户授权及浏览器支持等条件。主页面使用SyncManager注册同步任务，网络恢复时触发sync事件。Service Worker监听该事件并结合IndexedDB处理数据发送，确保离线数据不丢失。同步成功后可通过Notification API通知用户，并合理设计重试机制避免资源浪费，从而实现可靠的数据同步。
Service Worker 可以在页面关闭后继续运行，利用 Background Sync 功能实现网络恢复后的数据同步。这个机制特别适合处理用户在离线状态下提交的数据，比如表单、评论或上传内容。
启用 Background Sync 的前提条件
要使用后台同步，必须满足几个基础条件：
-
• 站点通过 HTTPS 提供服务（本地开发时 localhost 例外）
• 注册了 Service Worker
• 用户已授予必要的权限（如通知权限，视具体场景而定）
• 浏览器支持 Background Sync API（目前主流现代浏览器基本支持）
注册和触发同步事件
在主页面中，可以通过 SyncManager 注册一个同步任务。当浏览器检测到网络恢复且设备处于活跃状态时，会触发 Service Worker 中的 sync 事件。
示例代码：
// main.js
if ('serviceWorker' in navigator && 'SyncManager' in window) {
const sw = await navigator.serviceWorker.ready;
await sw.sync.register('sync-data'); // 注册名为 'sync-data' 的同步任务
}
在 Service Worker 中处理 sync 事件
Service Worker 需监听 sync 事件，并在其中执行真正的数据发送逻辑。建议结合 IndexedDB 存储离线数据，确保不会丢失。
// service-worker.js
self.addEventListener('sync', event => {
if (event.tag === 'sync-data') {
event.waitUntil(
sendDataFromIndexedDB().then(() => {
console.log('后台数据同步成功');
}).catch(err => {
// 同步失败，下次再试
console.error('同步失败:', err);
})
);
}
});
async function sendDataFromIndexedDB() {
const db = await openDatabase(); // 打开存储离线数据的数据库
const data = await db.getAllPending(); // 获取待同步的数据
for (const item of data) {
const res = await fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(item),
headers: { 'Content-Type': 'application/json' }
});
if (res.ok) {
await db.deleteItem(item.id); // 成功后从本地删除
} else {
throw new Error('提交失败');
}
}
}
增强用户体验与容错处理
后台同步不应完全静默，适当反馈能提升信任感。可以结合 Notification API 在同步完成后提醒用户。
// service-worker.js 中补充
await self.registration.showNotification('数据已同步', {
body: '您离线期间的操作已成功提交。',
icon: '/icon.png'
});
同时注意错误重试策略：如果 sync 失败，浏览器通常会在下一次有机会时重新尝试，但应避免无限重试导致资源浪费。
基本上就这些。只要把数据存好、注册同步任务、在 Service Worker 里发出去，就能实现可靠的后台数据同步。
