离线优先的核心是启动即以本地为主数据源、网络为可选通道。需预缓存app shell实现首屏秒开，用cache first服务静态资源，/offline.html兜底错误页；动态数据存indexeddb并优先本地读取；变更标记“待同步”，结合background sync自动同步与冲突处理；弱网下设超时降级并提示状态。

网页应用实现离线优先，关键不是“等断网再补救”，而是从启动那一刻起，就把本地当作主数据源、把网络当作可选通道。弱网下不卡顿、不白屏、不报错，靠的是一套协同工作的机制，而不是单点技术堆砌。

预缓存核心资源，确保首屏秒开

用户打开页面的第一反应，决定是否留下。Service Worker 在安装阶段必须预缓存 App Shell（HTML、CSS、JS、图标、离线页等），让浏览器无需联网就能渲染完整界面骨架。

• 缓存清单要精简：只放真正影响首屏渲染的文件，避免 install 阶段失败导致离线失效
• 使用 Cache First 策略服务静态资源，比如 /index.html 或 /static/js/main.js，命中即返回，零延迟
• 为离线场景单独准备 /offline.html，并在 fetch 拦截中兜底返回，替代浏览器默认的“无法连接”错误页

用 IndexedDB 存结构化数据，读写不依赖网络

光有页面不行，用户得能看数据、填表单、改内容。所有动态内容（如待办列表、草稿、用户设置）必须持久化到 IndexedDB，并在页面加载时优先从本地读取。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 启动时先查 IndexedDB 渲染列表，再后台 fetch 最新数据做比对和更新，避免白屏等待
• 新增/修改/删除操作全部先落库，标记为“待同步”，不因网络中断而阻塞交互
• 推荐使用 idb 或 Dexie.js 封装 IndexedDB，降低事务、版本升级、索引管理的复杂度

自动同步 + 冲突处理，保证数据不丢不乱

离线产生的变更，不能靠用户手动点“同步”。网络恢复后，系统需自动投递、合并、反馈结果。

• 监听 navigator.onLine 和 online/offline 事件，触发同步逻辑；更可靠的做法是结合 Background Sync API，即使用户已关闭标签页也能执行
• 待同步队列存在 IndexedDB 中，每条记录带时间戳、操作类型（create/update/delete）、原始 ID 和本地生成的唯一标识
• 冲突时按业务定策略：例如“最后写入生效”（用时间戳判断）、或“服务器权威”（强制覆盖本地）、或留痕供用户选择（适合文档协作类场景）

弱网感知与体验降级，让用户心里有数

网络没断，但慢得像拨号——这种“半死不活”的状态最伤体验。需要主动识别并响应。

• 在关键请求中加超时控制（如 fetch 配置 { signal: AbortSignal.timeout(8000) }），超时后自动切回本地数据或展示缓存版本
• 界面上明确提示当前状态：“已离线，更改将稍后同步”“正在后台更新最新内容”
• 对图片、视频等大资源采用 Network-First + Cache-Fallback 策略：先尝试加载高清图，失败则展示低分辨率占位图或缓存旧图