Service Worker Background Sync 离线表单重试实践

概览Background Sync 能在网络恢复时触发延后任务。结合 IndexedDB 暂存离线表单与 SW 重试逻辑，可显著提升弱网提交成功率。客户端注册'use client'

if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/sw-sync.js')

}

async function submitOffline(form: HTMLFormElement) {

const fd = new FormData(form)

try {

await fetch('/api/submit', { method: 'POST', body: fd })

} catch {

const db = await openDB('offline', 1)

const tx = db.transaction('forms', 'readwrite')

tx.store.add(Object.fromEntries(fd.entries()))

await tx.done

const reg = await navigator.serviceWorker.ready

await (reg as any).sync.register('submit-forms')

}

}

简易 IndexedDBfunction openDB(name: string, version: number) {

return new Promise<any>((resolve) => {

const req = indexedDB.open(name, version)

req.onupgradeneeded = () => {

const db = req.result

db.createObjectStore('forms', { keyPath: 'id', autoIncrement: true })

}

req.onsuccess = () => resolve(req.result)

})

}

sw-sync.jsself.addEventListener('sync', async (event) => {

if (event.tag === 'submit-forms') {

event.waitUntil((async () => {

const db = await new Promise((resolve) => {

const req = indexedDB.open('offline', 1)

req.onsuccess = () => resolve(req.result)

})

const tx = db.transaction('forms', 'readwrite')

const store = tx.objectStore('forms')

const all = await new Promise((resolve) => {

const req = store.getAll()

req.onsuccess = () => resolve(req.result)

})

for (const item of all) {

const fd = new FormData()

for (const [k, v] of Object.entries(item)) {

if (k !== 'id') fd.append(k, v)

}

try {

await fetch('/api/submit', { method: 'POST', body: fd })

store.delete(item.id)

} catch {}

}

})())

}

})

治理要点对重复重试设定上限与退避，避免服务器压力。数据加密或最小化存储，保护隐私与安全。与 UI 提示协同，告知用户离线暂存与恢复重试状态。验证与指标浏览器：Chrome/Edge 支持 Background Sync；Safari/Firefox 退化为用户触发重试提交成功率在弱网场景显著提升；用户体验更稳定