离线提示可通过监听 navigator.onLine 与 online/offline 事件实现，配合固定顶部 banner、无障碍支持及重试机制，轻量可靠。
在离线状态下，通过监听 navigator.onLine 和网络事件，配合简洁的 DOM 操作，就能快速给出用户友好的提示界面，无需后端参与。
监听网络状态变化
利用 window.addEventListener('online') 和 'offline' 实时捕获连接切换：
- 页面加载时立即检查
navigator.onLine初始值，避免首次打开就离线却无提示 - 绑定事件后，状态变更时动态显示/隐藏提示条，不依赖定时轮询
- 注意：该 API 在部分老旧安卓 WebView 中可能不准，可辅以简单 fetch 探测（如请求一个轻量本地资源）增强可靠性
设计轻量提示 UI（不遮挡核心内容）
推荐使用顶部固定 banner，避免弹窗打断操作流：
- 用
position: fixed; top: 0; width: 100%; z-index: 9999;确保始终可见 - 离线时显示浅灰色背景 + 黄色感叹号图标 + 简短文案（如“您当前处于离线状态”）
- 在线时自动淡出（可用 CSS transition 或简单 removeClass），不残留 DOM
- 为无障碍考虑，添加
aria-live="polite"，让屏幕阅读器能播报状态变化
增强用户体验的小细节
让提示更自然、更可操作：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
- 离线提示旁加一个「重试」按钮，点击后执行一次
fetch('/health')或重新检查navigator.onLine，成功则自动关闭提示 - 若页面支持离线缓存（如 Service Worker + Cache API），可在提示中补充“部分内容仍可查看”提升信任感
- 对表单类操作，在提交前主动校验
navigator.onLine，提前拦截并提示，而非等请求失败再反馈
兼容性与降级处理
面向真实环境做务实适配：
- IE10+ 支持
navigator.onLine，低于此版本可跳过监听，或 fallback 到「无网络事件，仅首次检测」 - 某些企业内网或代理环境会误报 online，建议关键操作（如支付、提交）仍以实际请求结果为准，状态提示仅作辅助
- 避免在提示中使用绝对化表述（如“无法访问任何功能”），改用中性措辞（如“部分功能暂不可用”）
不复杂但容易忽略。核心是快响应、轻展示、有反馈——用户一眼看懂状态，顺手点一下就能验证恢复，体验就稳了。
