应组合使用浏览器事件、DOM状态管理、主动探活和Service Worker降级策略：早注册online/offline监听器，用data-status统一标记DOM，fetch探活/health接口验证真实连通性，并通过SW缓存核心资源实现离线可用。

网页应用检测网络在线/离线状态，不能只依赖 navigator.onLine 的布尔值——它反映的是设备是否接入了任意网络（比如连着但路由器断网、内网通外网不通），而非你的服务是否真正可达。真实可用的检测，必须把浏览器事件、DOM结构、主动探测和降级策略组合使用。

用 window 监听 online/offline 事件

这两个事件只在 window 对象上触发，不冒泡到 document 或 body，也不能委托。绑定错误等于失效：

• ✅ 正确写法：window.addEventListener('online', handler) 或 window.addEventListener('offline', handler)
• ❌ 错误写法：document.addEventListener('online', ...)、window.ononline = handler（会覆盖其他模块监听器）
• 注册要早：放在 <script></script> 最开头，或 DOMContentLoaded 回调里，别等框架 mount 完再加
• 记得清理：单页应用切换路由或组件卸载时，调用 removeEventListener，避免重复执行

用 data-status 统一管理 DOM 状态

别让 JS 去解析 class 名或文本内容判断状态。结构要为状态变化留出口：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 给根容器或提示区域加 data-status="online" 或 data-status="offline"，值标准化、易读取、易更新
• 关键提示区加 data-offline-target 和 aria-live="polite"，方便 JS 快速定位并支持无障碍
• 避免把状态藏在 title、alt 或纯文本中——SEO 和屏幕阅读器会读，JS 却难提取
• 后端能渲染就由服务端输出初始状态，例如
  ，JS 只负责后续响应

用 fetch 探活验证真实业务连通性

navigator.onLine 在 WiFi 连着但 DNS 失败、公司防火墙拦截、安卓 WebView 卡死等场景下仍返回 true，而你的 API 已经 404。所以每次 online 触发后，必须立刻探一次：

• 请求轻量 HEAD /health，加 cache: 'no-store' 和 AbortSignal.timeout(1500)
• 只接受 2xx；超时、0 状态码、4xx/5xx 都算“不可达”，维持离线 UI
• /health 接口必须无依赖：不读 session、不校验 token、不查数据库，返回空 body + 200 即可
• 不轮询：只在状态切换后探一次，或用户点击“重试”时再探，避免耗电和触发服务端限流

配合 Service Worker 做缓存与降级

离线体验不止是提示，还要保障基础功能可用：

• 注册 SW 后，在 install 事件中缓存核心静态资源（HTML/CSS/JS/图标），带明确版本号如 'v2.1'
• 在 fetch 事件中优先匹配缓存，缓存未命中再发起网络请求；失败时返回兜底页面（如 /offline.html）
• 克隆响应体再存入缓存，避免响应体被消费后无法复用
• 激活新 SW 时，在 activate 事件中清理旧缓存，防止版本混乱