离线页面是用户断网时的第一触点，需提供状态确认、原因说明与主动检测提示；嵌入可访问的缓存内容入口；联网后自动重试并平滑回归原上下文，减少中断感。
离线页面不是“兜底摆设”，而是用户断网时的第一触点。设计目标很明确：让用户清楚当前处于离线状态、知道已缓存哪些内容可访问、并能顺畅回到联网后的正常体验——而不是卡在静态提示页里反复刷新。
离线页必须包含明确的网络状态反馈
不能只写“您已离线”五个字。要结合视觉和文案传递三层信息：
- 状态确认：用图标（如断开的Wi-Fi符号）+ 醒目标题（例：“网络已断开”），避免模糊表述
- 原因说明：补充简短解释，如“当前设备未连接互联网，部分功能暂不可用”
- 主动检测提示：加一句“我们正在监听网络恢复…”，让用户感知系统仍在工作，不是死页
提供可操作的本地内容入口
纯提示页会加剧挫败感。应在离线页中嵌入真正可用的缓存资源：
- 显示已缓存的最近3–5个页面链接（如“昨天查看的订单”“草稿箱中的笔记”），点击直接打开本地副本
- 若应用支持离线表单填写，提供“继续编辑”按钮，跳转至本地存储的草稿页
- 避免跳转外部链接或调用未缓存API的按钮，所有交互必须100%由Service Worker接管
自动重试与平滑回归联网状态
用户连上网络后，不应要求手动刷新才能恢复。关键动作要自动触发：
- 监听
online事件，在恢复瞬间弹出轻量提示：“网络已恢复，正在同步最新内容…” - 立即尝试拉取首页或当前页的最新版本；若成功，用
location.reload()或clients.matchAll().then(...)通知所有打开的页面刷新 - 若用户正停留在离线页，可自动重定向到原请求URL（而非强制跳首页），保持上下文连续性
不依赖用户主动刷新的体验增强
有些场景下，用户可能没注意到网络已恢复。可叠加一层温和引导：
- 在离线页底部固定一行小字：“网络恢复后将自动更新”，旁边带一个微动效的信号格图标
- 若页面停留超30秒，且检测到网络已通，弹出底部横幅：“点击刷新获取最新内容”，按钮文案比“确定”更具体
- 对已缓存但有更新的资源（如CSS/JS），Service Worker可在后台静默更新，下次访问即生效，无需用户感知
本质上，离线页是过渡界面，不是终点。它存在的意义是减少中断感，把“断网”这个负面事件，转化为一次可控、可预期、有退路的操作过程。
