网络在线离线检测器 - 实时监听连接状态

浏览器通过 navigator.onLine 属性来判断网络状态。该属性返回布尔值，true 表示设备可以访问互联网，false 表示设备未连接网络。同时，浏览器提供 online 和 offline 事件，可以实时监听网络状态的变化。需要注意的是，navigator.onLine 判断的是设备是否连接到网络（局域网或互联网），但并不保证一定能访问特定的远程服务器。

Network Information API（通过 navigator.connection 访问）可以提供以下信息：
• effectiveType：有效连接类型（如 4g、3g、2g、slow-2g）
• downlink：估计的下行带宽（Mbps）
• rtt：估计的往返时间（毫秒）
• saveData：用户是否启用了数据节省模式
• type：底层连接技术类型（如 wifi、cellular、ethernet）
该API主要在Chromium内核浏览器上可用（Chrome、Edge、Opera等），Firefox和Safari支持有限。

监听网络状态变化对于现代Web应用非常重要：
• 提升用户体验：在网络断开时及时提示用户，避免用户操作失败
• 数据保护：在网络恢复时自动同步数据，防止数据丢失
• 性能优化：根据网络类型（4G/WiFi）动态调整资源加载策略
• 离线功能：配合Service Worker实现离线缓存和PWA应用
• 节省流量：在移动网络下降低图片质量或延迟非关键请求

这种情况常见于以下场景：
• 连接了WiFi但WiFi本身没有互联网接入（如公共WiFi需要认证）
• DNS解析失败，虽然网络连接正常但无法解析域名
• 防火墙或代理阻止了特定网站的访问
• 目标服务器宕机或正在进行维护
• 浏览器插件或安全软件拦截了请求
建议尝试访问多个不同网站来确认问题范围，或使用ping命令排查网络层问题。

effectiveType 是浏览器对当前网络质量的综合评估：
• slow-2g：极慢网络，RTT≥2000ms，下行≤50Kbps，仅适合纯文本传输
• 2g：慢速网络，RTT≥1400ms，下行≤70Kbps，适合压缩后的简单页面
• 3g：中等网络，RTT≥270ms，下行≤700Kbps，适合标准网页浏览
• 4g：快速网络，RTT<270ms，下行较高，适合流媒体和高清内容
• WiFi通常被归类为4g级别，延迟更低，带宽更高
开发者可根据此值动态调整资源质量，在慢速网络下提供降级体验。

如果需要验证真实的互联网连通性（而不仅仅是本地网络连接），可以采用以下方法：
• 使用 fetch() 请求一个可靠的远程资源（如公共API或CDN上的小文件），设置超时时间
• 请求 favicon 或一个1x1像素的追踪图片
• 结合 navigator.onLine 和实际请求结果综合判断
• 使用 AbortController 设置请求超时，避免长时间等待
这样能更准确地判断设备是否能真正访问互联网，而不仅仅是连接到了本地网络。