HTML5离线同步核心是断网不丢数据、联网自动重发，依赖Service Worker拦截调度、IndexedDB持久化暂存、Background Sync自动触发三者协同。
HTML5 中实现离线数据同步，核心不是“断网缓存”本身，而是让数据在断网时不丢失、网络恢复后能自动重发。Service Worker 是关键枢纽，但它不直接存业务数据——它负责拦截请求、调度同步、配合 IndexedDB 持久化暂存，三者缺一不可。
Service Worker 必须配合 IndexedDB 存订单/表单
Service Worker 无法直接序列化 FormData 或复杂对象（比如含 File 的表单），localStorage 更不合适：它是同步阻塞 API，不支持事务，也不支持按时间戳查询。正确做法是：
- 页面加载时就初始化 IndexedDB 实例，建好 orders_pending 或 forms_queue objectStore，字段至少含：
id（推荐crypto.randomUUID()）、data（JSON 字符串）、status（'pending'/'sent'/'failed'）、created_at - 用户点击提交时，先用事务写入 IndexedDB，再尝试 fetch；即使 fetch 立即失败，数据已落库
- 含文件的表单：提取
file.name、file.size、file.type，用URL.createObjectURL(file)生成临时 URL 存进 DB；同步时再 fetch 该 URL 转成 blob 构造 FormData
用 Background Sync 自动触发重发，不依赖用户刷新
不能等用户手动重进页面或点“重试”。应注册后台同步任务，由浏览器在合适时机（联网、电量充足）自动执行：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 主线程中检测到提交失败，立即调用：
navigator.serviceWorker.ready.then(r => r.sync.register('sync-orders')) - 在 sw.js 的
sync事件中，打开 IndexedDB，查status === 'pending'的记录，逐条 POST 到接口 - 成功则更新 DB 中对应记录为
status: 'sent'；失败保留'pending'，可加retry_count字段防无限重试
fetch 事件里做请求兜底，避免白屏或报错
Service Worker 的 fetch 监听器不只是缓存静态资源，更要处理 API 请求的降级逻辑：
立即学习“前端免费学习笔记（深入）”；
- 对
/api/order/submit这类 POST 接口，不走 cache-first，而用 network-first + fallback：先 fetch，失败时返回一个预设的 JSON 响应（如{success: false, message: '已暂存，稍后自动提交'}） - 同时在主线程中监听该响应，若含
message提示暂存成功，就在 UI 显示「已离线保存」并刷新待同步列表 - 注意：不要在 fetch 事件里直接操作 IndexedDB（它不支持跨线程），所有 DB 操作必须放在 sync 事件或主线程中
网络状态判断要务实，别只信 navigator.onLine
navigator.onLine 只反映系统是否连上 Wi-Fi/蜂窝，不能代表能访问你的服务器。真实判断方式是：
- 提交前可发一个轻量 HEAD 请求试探（如
/health），超时即视为不可用 - fetch 失败后，才真正写入 IndexedDB 并标记 pending
-
online事件只作辅助提示，不可作为同步触发唯一依据；Background Sync 才是主力
