应组合使用浏览器事件、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 却难提取 - 后端能渲染就由服务端输出初始状态，例如
<div data-status="online" data-display-text="网络正常"></div>，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事件中清理旧缓存，防止版本混乱
