BOM如何检测网络状态？

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《BOM如何检测用户网络状态？》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

navigator.onLine 是获取用户网络连接状态的直接方法，通过返回布尔值判断是否在线，并结合监听 window 的 online 和 offline 事件实现状态变化响应。1. 初始检查 navigator.onLine 可判断当前是否联网；2. 监听 online 和 offline 事件以实时响应网络变化；3. 但其存在局限，仅能检测是否连接局域网而非能否访问互联网；4. 建议配合轻量请求验证真实网络可达性；5. 利用 Network Information API（navigator.connection）可获取更详细的连接信息，如连接类型、下行速度、往返时间等，从而实现更精细的网络适应策略。

要通过浏览器对象模型（BOM）获取用户的网络连接状态，最直接的方法就是利用 navigator.onLine 这个布尔属性，以及监听 window 上的 online 和 offline 事件。这基本上就是浏览器给我们提供的标准接口，用起来也挺方便的。

解决方案

要判断当前浏览器是否在线，可以直接检查 navigator.onLine。它会返回一个布尔值：true 表示在线，false 表示离线。

同时，为了实时响应网络状态的变化，我们需要监听 window 对象的 online 和 offline 事件。当网络从离线变为在线时，会触发 online 事件；反之，从在线变为离线时，则触发 offline 事件。

一个简单的实现可能是这样：

// 初始检查
if (navigator.onLine) {
  console.log("当前网络在线。");
} else {
  console.log("当前网络离线。");
}

// 监听网络状态变化
window.addEventListener('online', () => {
  console.log("网络连接已恢复！");
  // 可以在这里更新UI或重新加载数据
});

window.addEventListener('offline', () => {
  console.log("网络连接已断开。");
  // 可以在这里显示离线提示，禁用某些功能
});

这个机制，说白了，就是浏览器底层在侦测网络接口（比如Wi-Fi、以太网）的状态。它如果发现有IP地址分配，或者能ping通网关，那多半就认为是“在线”了。

navigator.onLine 真的可靠吗？它的局限性有哪些？

这真的是个好问题，也是我个人在实际开发中经常会思考的一个点。navigator.onLine 确实提供了最基础的判断，但它有个挺大的局限性：它只告诉你浏览器是否“连接”到了一个网络，而不是它是否能“访问互联网”。

想象一下，你连上了公司的内网，或者家里的路由器，但路由器本身的光猫断网了，或者公司的代理服务器挂了。这时候，navigator.onLine 依然会是 true，因为它认为你连接到了局域网。但实际上，你根本访问不了外部网站，应用里需要从服务器获取的数据也拉不下来。这种“假在线”的情况，说实话，挺让人头疼的。

所以，如果你的应用对网络可用性要求很高，仅仅依赖 navigator.onLine 是不够的。更健壮的做法，通常是在判断 navigator.onLine 为 true 的基础上，再发起一个小的、轻量级的请求到你服务端的某个已知、稳定的端点（比如一个健康检查接口或者一个favicon.ico），通过这个请求的成功与否来最终确认是否真正能访问互联网。如果请求超时或者失败，那么即使 onLine 是 true，也应该认为当前是“无网络”状态，或者至少是“网络不可用”状态。

如何在Web应用中优雅地响应网络状态变化？

响应网络状态变化，其实就是如何利用 online 和 offline 事件来提升用户体验。我个人觉得，最关键的是要给用户一个清晰的反馈，并调整应用的行为。

当 offline 事件触发时，一个常见的做法是显示一个覆盖在页面顶部的提示条，告诉用户“您已离线，部分功能可能受限”。这个提示条最好是那种不影响用户继续浏览已加载内容，但又能明确告知状态的。同时，对于那些需要网络才能进行的操作（比如提交表单、加载新数据），应该暂时禁用或者提供离线缓存的替代方案。

而当 online 事件触发时，提示条应该自动消失，并且应用可以尝试恢复之前因为离线而暂停的操作，或者刷新数据。这里有个小细节，恢复操作时要小心，避免在短时间内发起大量请求，可以考虑稍微延迟一下，或者检查一下用户是否还在当前页面。

举个例子，假设你有一个待办事项应用：

const networkStatusBanner = document.getElementById('network-status-banner');

window.addEventListener('offline', () => {
  networkStatusBanner.textContent = '您已离线，数据同步暂停。';
  networkStatusBanner.style.display = 'block';
  // 禁用提交按钮，或者将待提交的数据标记为“待发送”
});

window.addEventListener('online', () => {
  networkStatusBanner.textContent = '网络已恢复，正在尝试同步数据...';
  // 尝试发送待发送的数据
  // 几秒后，如果同步成功，隐藏banner
  setTimeout(() => {
    networkStatusBanner.style.display = 'none';
  }, 3000);
});

// 首次加载时也要检查一下
if (!navigator.onLine) {
  networkStatusBanner.textContent = '您当前处于离线状态。';
  networkStatusBanner.style.display = 'block';
}

这样的处理，既能让用户感知到网络状态，又能让应用在不同网络条件下提供相对平稳的体验。

除了在线/离线，有没有办法获取更详细的网络连接信息？

当然有，而且这个功能在某些场景下还挺有用的，尤其是在需要优化用户体验或者进行性能分析的时候。这里就要提到 Network Information API 了，它通过 navigator.connection 对象提供了更丰富的网络连接详情。

这个API可以让你获取到当前的连接类型（比如 wifi, cellular, ethernet），甚至是一些性能指标，例如：

• effectiveType: 有效连接类型，比如 2g, 3g, 4g。这个特别实用，因为它考虑了实际的传输速度，而不是仅仅看你连的是什么网络。
• rtt: 往返时间（Round-Trip Time），表示请求发送到服务器并收到响应所需的毫秒数。
• downlink: 下行速度，以兆比特每秒（Mbps）为单位。
• saveData: 一个布尔值，表示用户是否开启了数据节省模式。

这些信息对于实现自适应内容加载、根据网络质量调整媒体流清晰度、或者在低速网络下禁用某些耗流量的功能都非常有价值。

不过需要注意的是，navigator.connection 的支持度在不同浏览器和平台上可能有所差异，尤其是像 rtt 和 downlink 这样的属性，可能并不是所有浏览器都完整实现了。在使用之前，最好做一下特性检测。

一个简单的例子：

if (navigator.connection) {
  const connection = navigator.connection;

  console.log(`网络类型: ${connection.type}`); // 例如: wifi, cellular
  console.log(`有效网络类型: ${connection.effectiveType}`); // 例如: 4g, 3g
  console.log(`往返时间 (RTT): ${connection.rtt}ms`);
  console.log(`下行速度: ${connection.downlink} Mbps`);
  console.log(`数据节省模式: ${connection.saveData ? '已开启' : '未开启'}`);

  // 监听有效网络类型变化
  connection.addEventListener('change', () => {
    console.log(`网络类型已变为: ${connection.effectiveType}`);
    // 可以在这里根据新的网络类型调整应用行为
  });
} else {
  console.log("当前浏览器不支持 Network Information API。");
}

我个人觉得，navigator.connection 提供了比 onLine 更细粒度的控制和洞察力，对于追求极致用户体验的Web应用来说，它绝对值得投入时间去研究和利用。当然，这也意味着你需要考虑更多的情况，比如网络类型从 4g 降级到 3g 时，你的应用应该如何优雅地降级服务。

终于介绍完啦！小伙伴们，这篇关于《BOM如何检测网络状态？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！