PWA 后台离线同步依赖 Service Worker 的 Background Sync API，需 HTTPS/localhost 环境、SW 正确注册激活，并在主线程登记 sync 任务，在 SW 中用 event.waitUntil() 处理并配合 IndexedDB 暂存与清理数据。
移动端 PWA 实现后台离线同步，核心是靠 Service Worker 的 Background Sync API —— 它允许页面在无网或用户关闭标签页后，等网络恢复时自动触发数据提交，无需用户手动重试。
确保 Service Worker 已正确注册并启用
后台同步依赖 Service Worker 长期存活，因此必须满足基本前提：
- 页面通过 HTTPS（生产环境）或 localhost（开发环境）提供服务
- Service Worker 脚本（如
sw.js）已成功注册并完成 install/activate 流程 - 注册时建议调用
self.skipWaiting()和clients.claim()，避免旧版本阻塞新逻辑
在主线程中注册同步任务（带容错检测）
用户执行关键操作（如提交表单、保存草稿）时，不直接发请求，而是登记一个后台同步任务：
navigator.serviceWorker.ready.then(registration => {
// 检查浏览器是否支持 Background Sync
if (!registration.sync) {
console.warn('当前浏览器不支持 Background Sync');
return;
}
// 注册唯一标识的同步任务（例如 'submit-order'）
registration.sync.register('submit-order')
.then(() => console.log('同步任务已登记，等待网络恢复'))
.catch(err => console.error('登记失败:', err));
});
注意：必须在 navigator.serviceWorker.ready 后调用，否则可能因 SW 尚未就绪而报错。
service-qa-coach
下载
评估聊天、邮件、电话、社交平台私信（DM）或电商平台客服团队的服务质量。适用于团队需要制定 QA 评分卡、故障模式分析、辅导计划、校准检查清单或服务改进简报，但无法访问实时工单系统、CRM 或联络中心系统的情况。
在 Service Worker 中监听并处理 sync 事件
当设备联网且浏览器判定适合执行时（例如前台空闲、电量充足），SW 会收到 sync 事件：
// sw.js
self.addEventListener('sync', event => {
if (event.tag === 'submit-order') {
event.waitUntil(
// 1. 从 IndexedDB 或 Cache 中读取待同步的数据
readPendingOrders()
.then(orders => Promise.all(
orders.map(order =>
// 2. 发起真实网络请求
fetch('/api/orders', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(order)
})
.then(res => {
if (res.ok) {
// 3. 成功后从本地存储中删除该条目
return deleteOrderFromDB(order.id);
}
throw new Error(`HTTP ${res.status}`);
})
)
))
.catch(err => console.error('同步失败，将重试:', err))
);
}
});
关键点：event.waitUntil() 告诉浏览器“这个任务还没完”，防止 SW 被提前终止；失败不会丢弃任务，系统会在后续条件满足时再次触发。
配合 IndexedDB 实现可靠数据暂存
后台同步本身不存储数据，只是触发时机。真实数据必须提前存入客户端持久化存储：
- 使用
IndexedDB存储结构化数据（如订单、笔记、上传文件元信息） - 避免仅用
localStorage—— 它是同步阻塞 API，不适合大量或二进制数据 - 同步成功后务必清理对应记录，否则会重复提交
