无需登录 数据私有 本地保存

后台同步 API 演示 - 离线操作队列演示

PWA 开发工具 后台同步 演示 离线
22
0
0
0
在线
⏳ 0 ✅ 0 ❌ 0 📋 0
添加操作

离线时操作将加入同步队列

模拟参数
同步队列

队列为空

添加操作或切换到离线模式后添加操作

同步日志
--:--:--🟢 工具已就绪，等待操作...
Service Worker 注册示例

实际部署时需要 HTTPS 并注册以下 Service Worker

📄 sw.js — Service Worker

// sw.js self.addEventListener('sync', (event) => { if (event.tag === 'sync-operations') { event.waitUntil(processQueue()); } }); async function processQueue() { const queue = await getQueueFromStorage(); for (const op of queue) { try { await fetch('/api/sync', { method: 'POST', body: JSON.stringify(op), headers: {'Content-Type':'application/json'} }); await removeFromQueue(op.id); } catch (err) { console.error('Sync failed:', err); } } }

📄 主线程注册代码

// 主线程 - 注册 sync if ('serviceWorker' in navigator) { const reg = await navigator.serviceWorker.register('/sw.js'); // 离线时添加操作后注册同步 async function addOperation(data) { await saveToLocalQueue(data); if ('sync' in reg) { await reg.sync.register('sync-operations'); } } } // 监听网络恢复 window.addEventListener('online', () => { console.log('网络已恢复，后台同步将自动触发'); });
常见问题与知识点
🔹 什么是后台同步 API (Background Sync)？

Background Sync API 允许 Web 应用在后台延迟执行任务，直到用户拥有稳定的网络连接。它通过 Service Worker 实现，即使浏览器标签页关闭，同步操作也能继续执行。这对于离线优先的应用非常关键。

🔹 后台同步需要什么条件？

需要 HTTPS 环境、浏览器支持 Service Worker 和 SyncManager 接口。Chrome、Edge、Opera 等基于 Chromium 的浏览器支持较好。Firefox 和 Safari 的支持有限，需要使用其他离线策略作为降级方案。

🔹 离线操作队列应该用什么存储？

推荐使用 IndexedDB，因为它支持大容量异步存储、事务操作和索引查询。localStorage 适合小规模数据但容量有限（通常 5-10MB）且是同步操作。对于生产环境，IndexedDB 是更好的选择。

🔹 同步失败后如何处理？

应实现重试策略：指数退避（exponential backoff）、设置最大重试次数、记录失败原因。对于永久性失败（如数据验证错误），应标记为失败并通知用户。对于临时性失败（网络超时），自动重试。

🔹 后台同步与 PWA 的关系？

后台同步是 PWA（渐进式 Web 应用）离线能力的重要组成部分。配合 Service Worker 缓存和 Web App Manifest，后台同步让 Web 应用拥有接近原生应用的离线体验和数据可靠性。

🔹 如何检测浏览器是否支持后台同步？

使用 'serviceWorker' in navigator 和 'SyncManager' in window 进行特性检测。还可以通过 navigator.serviceWorker.ready 获取注册对象后检查 sync 属性的可用性来确认完整支持。

🔹 离线操作队列适用于哪些场景？

适用于消息发送、表单提交、数据上传、订单创建、内容发布、分析数据上报等场景。任何需要确保数据最终到达服务器的操作都可以使用离线队列模式来提升可靠性。

🔹 操作队列中的冲突如何解决？

采用乐观锁或版本号机制，每个操作携带资源版本。服务器端使用 last-write-wins 或合并策略。对于关键数据，可以实现 CRDT（无冲突复制数据类型）来保证最终一致性。

🔧 相关工具