Service Worker 是唯一可行的离线缓存入口，AppCache 已被主流浏览器彻底移除；真正可控的离线能力必须依赖 Service Worker + CacheStorage，它可拦截 fetch 请求、按需缓存与更新资源，并需 HTTPS（localhost 除外）、配合 IndexedDB 实现离线表单等复杂场景。
Service Worker 是唯一可行的离线缓存入口
AppCache 已被 Chrome 95+、Firefox 84+ 彻底移除，manifest 属性在 HTML 中写死只会被忽略，且现代构建工具（Vite、Webpack）默认不生成 .appcache 文件。你看到的“缓存生效”，大概率是浏览器强缓存或 HTTP Cache-Control 头在起作用，不是真正的离线能力。
真正可控的离线缓存必须靠 Service Worker + CacheStorage。它能拦截所有 fetch 请求，按需缓存、更新、匹配资源——比如只缓存 /api/ 的响应，但跳过 /upload 的 POST 请求。
- 注册前必须用 HTTPS（localhost 除外），否则
navigator.serviceWorker.register()直接失败 - 首次注册后，页面需刷新一次才能激活新 SW；后续更新需等所有客户端关闭再重开，或调用
skipWaiting()强制切换 - 缓存策略别写死：HTML 资源建议用
stale-while-revalidate，JS/CSS 用cache-first，API 响应用network-first并 fallback 到 IndexedDB
表单提交离线保存必须用 IndexedDB，不是 localStorage
localStorage 是同步阻塞 API，存大量字段或文件元数据时会卡住主线程；更关键的是它不支持事务和查询——比如你有 20 条待同步表单，网络恢复后要按时间戳顺序重发，localStorage 只能遍历全部再排序，而 IndexedDB 可直接用 index.openCursor() 按 createdAt 索引扫描。
FormData 含 <input type="file"> 时，不能直接 JSON.stringify —— File 对象序列化后变成空对象。正确做法是：提取文件名、大小、type，用 URL.createObjectURL(file) 生成临时 URL 存入 IndexedDB，同步时再用 fetch() 读取 blob 重新构造 FormData。
- 不要在 submit 事件里直接调用
indexedDB.open()：打开数据库是异步的，可能来不及存就跳转了；提前在页面加载时初始化好 DB 实例 - 每条待同步记录必须带唯一
id（推荐用crypto.randomUUID()）和status: 'pending' | 'sent' | 'failed'字段，避免重复提交 - 同步失败后别删记录，先标记
status: 'failed'，留着供人工重试或日志排查
网络恢复后自动重发必须监听 online 事件 + 主动轮询
window.addEventListener('online', ...) 只触发一次，且不可靠：设备从休眠唤醒时该事件常丢失；Wi-Fi 连上但 DNS 不通、服务器 503 时，navigator.onLine 仍返回 true。真实可用的方案是：监听 online 后立即发起一次 fetch('/health')，仅当得到 200 才认为可同步。
重发逻辑不能只依赖事件驱动。用户可能一直开着页面但没触发 online 事件，所以得加定时器：每 30 秒检查一次 IndexedDB 中 status = 'pending' 的记录，尝试发送，成功后更新 status。
- 重发时用
credentials: 'include'，否则登录态丢失导致 401 - 对同一张表单，连续 3 次 5xx 错误后暂停重试，改用
setTimeout(..., 5 * 60 * 1000)延迟 5 分钟再试 - 别在重发中直接
window.location.reload()，容易打断正在运行的同步过程
冲突处理没有银弹，得按业务定规则
两个设备同时编辑同一条记录，离线后各自提交，服务端收到两份修改，怎么合并？HTTP 协议本身不解决这个问题，只能靠业务层约定：
- 乐观锁：前端每次提交带
version字段，服务端比对 DB 当前 version，不一致则拒绝并返回 409，前端拉取最新数据再提示用户合并 - 最后写入为准：服务端不校验，直接覆盖，适合笔记类应用（用户预期是“我改的才生效”）
- 字段级合并：服务端解析 PATCH 请求体，只更新请求中出现的字段，其他字段保留原值——但要求前端明确传
{"name": "new", "email": null}表示清空 email
最易被忽略的是时间戳精度：不同设备系统时间偏差可能达数秒，Date.now() 不能当唯一排序依据。上线前务必确认后端是否已统一用 NTP 校时，或改用服务端生成的 serverTimestamp 字段做最终判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
