Service Worker 可拦截表单提交实现离线可靠提交：监听 fetch 事件识别 POST 请求，序列化数据存入 IndexedDB；网络恢复后通过 postMessage 触发重试，最多 3 次；主页面显示队列状态并同步结果，服务端需幂等；文件上传需预处理为 ArrayBuffer 存储。
Service Worker 可以拦截表单提交请求，在网络不可用时缓存数据，并在网络恢复后自动重试，实现可靠的离线提交体验。
拦截并缓存表单提交请求
在 Service Worker 中监听 fetch 事件，识别出 POST 表单请求（如 Content-Type: application/x-www-form-urlencoded 或 multipart/form-data），阻止其立即发出，转而序列化请求数据并存入 IndexedDB。
- 使用
event.request.clone()获取可读的请求体（注意：FormData需先转换为键值对或 JSON） - 提取 URL、method、headers 和 body（建议统一转为 JSON 格式存储，避免二进制处理复杂度）
- 为每条待提交记录生成唯一 ID 和时间戳，便于去重和排序
- 写入前检查 IndexedDB 是否已连接；失败时可降级到 localStorage（仅限简单字符串数据）
监听网络状态变化并触发重试
Service Worker 无法直接监听 navigator.onLine，需结合 fetch 失败兜底 + 定期轮询或客户端主动通知。
- 在主页面检测到网络恢复（如
online事件）后，向 Service Worker 发送postMessage({type: 'TRY_RESEND'}) - Service Worker 收到消息后，从 IndexedDB 读取待提交队列，按时间顺序逐个发起 fetch 请求
- 每次重试前检查
event.waitUntil()内的 Promise，确保生命周期延长至完成 - 成功则删除该条记录；失败保留并记录重试次数，避免无限循环（建议最多重试 3 次）
保证提交结果可追溯与用户感知
用户需要知道表单是否真正提交成功，不能仅依赖“发送成功”提示。
- 主页面提交时，立即显示“已保存至离线队列”，而非“提交成功”
- 通过
MessageChannel或client.postMessage将重试结果（成功/失败/跳过）同步回页面 - 对关键表单（如订单、留言），可在页面加载时查询 Service Worker 中的待提交数量，显示小红点或横幅提醒
- 服务端需支持幂等性（如通过客户端生成的 request-id 去重），防止重复提交
处理文件上传等复杂场景
原生 FormData 含 Blob 或 File 对象时，无法直接序列化。需提前在页面中预处理。
- 提交前将文件转为 base64 或使用
URL.createObjectURL()临时引用（注意生命周期） - 更推荐方式：在页面中先调用
FileReader.readAsArrayBuffer()，把文件内容转为 ArrayBuffer 存入 IndexedDB - 重试时重建
FormData，用new Blob([arrayBuffer])恢复文件字段 - 大文件需分片上传或加进度提示，避免阻塞 Service Worker 线程
