用localStorage搭配结构化JSON（含content、updatedAt、syncStatus、version）可实现真正可用的PWA备忘录，支持断网编辑、联网自动同步，并通过Web App Manifest、Service Worker和HTTPS三件套保障离线启动与运行。
用 localStorage 搭配简单离线逻辑，就能做出一个真正可用的 PWA 备忘录——不依赖后端、不强求复杂同步协议，重点是“断网能写、联网自动发”。关键不在技术多新，而在数据存得稳、同步判得准、用户无感。
本地存储：用结构化快照替代裸字符串
localStorage 不只是 key-value 存字符串。备忘录内容应以带元信息的 JSON 对象形式保存，包含内容、时间戳、状态标记和版本号：
- document：当前编辑器内容（如 Tiptap 的 JSON state 或纯文本+格式标记）
- updatedAt：最后修改时间（ISO 字符串，用于同步时比对）
- syncStatus：值为 "pending"（待同步）、"synced" 或 "failed"（失败需重试）
- version：应用数据格式版本（如 "2.1"），避免升级后读取旧结构出错
每次编辑结束（如 onBlur 或防抖 1.5 秒后），生成并保存该结构体。这样后续同步时可直接判断是否需要上传，而不是盲目覆盖。
离线状态检测与编辑保护
不能只靠 window.navigator.onLine，它不可靠。真实做法是结合主动探测 + 状态缓存：
- 页面加载时发起一次轻量 fetch（如 /health），成功则设 isOnline = true；失败则设为 false 并记录 lastCheckTime
- 编辑过程中持续监听 online/offline 事件，但仅作为辅助信号
- 当检测到离线，立即在 UI 显示“离线编辑中”，并将新创建/修改的备忘录自动标为 syncStatus: "pending"
- 若用户尝试删除某条已 synced 的笔记，先保留在 localStorage 中，仅打上 deleted: true 标记，留待联网后执行软删
联网后自动同步：轻量级冲突处理
网络恢复不等于立刻发请求。应使用 Service Worker 的 background sync（或降级为定时轮询）触发同步任务：
- 查找所有 syncStatus === "pending" 的笔记，按 updatedAt 升序排列（保证先改的先同步）
- 逐条 POST 到后端接口（如 /api/notes/upsert），携带完整结构体
- 后端返回 200 且含 serverUpdatedAt 字段时，本地更新 syncStatus 为 "synced"，并合并时间戳
- 若某条同步失败（如 409 冲突），不中断其余条目，单独记录 errorLog 并保持 pending 状态，下次再试
不实现双向 diff 或 OT 算法，初期用“最后写入者胜”策略足够——对备忘录类应用，人工干预成本低，且极少并发编辑同一笔记。
PWA 基础三件套必须到位
缺一不可，否则无法真正离线启动：
- Web App Manifest：提供 name、icons（至少 192x192 和 512x512 PNG）、display: "standalone"，让应用能添加到桌面并全屏运行
- Service Worker：缓存 HTML、JS、CSS、图标等静态资源，确保首次安装后即使断网也能打开首页和编辑器界面
- HTTPS：所有现代浏览器强制要求，本地开发可用 localhost，上线必须部署在 HTTPS 域名下
Service Worker 中建议缓存策略为 Cache First + Network fallback，静态资源缓存 30 天，HTML 使用 Stale-While-Revalidate 保证及时更新。
