如何用Service Worker实现后台数据同步？

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  const sw = await navigator.serviceWorker.ready;
  await sw.sync.register('sync-data'); // 注册名为 'sync-data' 的同步任务
}

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('提交失败');
    }
  }
}

await self.registration.showNotification('数据已同步', {
  body: '您离线期间的操作已成功提交。',
  icon: '/icon.png'
});