移动端H5离线流畅体验的关键是掩盖网络缺失、接管交互链路、预置响应逻辑，通过Service Worker拦截伪造响应、缓存结构化数据、乐观更新、本地状态驱动UI、资源全量预置及适度模拟延迟来实现。
移动端 H5 在离线状态下实现“像在线一样流畅的反馈”，关键不在于完全复刻网络行为，而在于**掩盖网络缺失、接管交互链路、预置响应逻辑**。它不是让离线变在线，而是让用户感知不到断网——点击有响应、滑动不卡顿、表单能提交、错误有兜底。
用 Service Worker 拦截并伪造网络响应
这是最核心的一环。Service Worker 能在请求发出前就介入，对特定接口（如用户信息、配置、列表数据）返回预存的 mock 响应，而非等待超时或报错。
- 提前缓存结构化数据：在用户在线时，把常用 API 的成功响应（如
/api/user、/api/config）存入 Cache API，带版本标识 - fetch 事件中智能 fallback：当检测到 navigator.onLine 为 false，或 fetch 请求失败时，优先匹配缓存中的对应 URL 响应；若无，则返回轻量 JSON（如
{ code: 200, data: [] }）保证接口调用不中断 - 对 POST 类操作做“乐观更新”：先本地更新 UI（如点赞数+1），同时将操作记录存入 IndexedDB；等恢复联网后，再批量重放并校验结果
本地状态驱动 UI，避免依赖实时网络
很多“卡顿感”来自 UI 等待接口返回才渲染。离线场景必须把状态管理前置。
- 首屏数据内联或预置：把页面骨架、默认列表、用户基础信息等，直接写在 HTML 或 localStorage 中，打开即渲染，不等 fetch
- 交互反馈不等后端：按钮点击后立即置灰 + 加载态图标，300ms 内无真实响应也自动收起，避免用户反复点击
- 表单提交走“存-发”两阶段：离线时先存入 IndexedDB，显示“已保存，网络恢复后自动提交”；联网后由后台服务轮询或定时同步
资源离线可用，消除白屏与加载抖动
离线 ≠ 只能看静态页。所有影响视觉和交互的资源都应可离线加载。
- HTML/CSS/JS 图片全量预置：通过 prefetch + Service Worker 缓存，确保核心页面资源命中率接近 100%
- 关键动画不依赖 JS 计算：用 CSS @keyframes + will-change + transform 实现过渡，避免离线时 JS 执行卡顿导致动画掉帧
- 字体和图标本地化：Web Font 改用 font-display: swap + 本地 fallback 字体；iconfont 替换为 inline SVG，杜绝离线时图标空白
模拟网络延迟与错误，提升心理预期一致性
用户习惯在线下的“稍等一下”，突然变成秒响应反而觉得异常。适度模拟可增强可信度。
- 对非关键请求加 100–300ms 人工 delay（仅离线时）：比如下拉刷新后延迟 200ms 再展示新数据，模拟真实请求耗时
- 错误提示统一语义化：“网络暂时不可用，正在使用本地数据”比“请求失败”更友好
- 提供手动刷新入口，但默认不强制：顶部下拉区域保留，松手后触发本地数据 reload，不发起网络请求
