HTML5如何获取网络类型？移动端检测网络状态的方法

在 HTML5 开发中，获取网络类型（如 Wi-Fi、4G、5G、2G 等）对于优化用户体验至关重要，在视频播放时根据网络状况自动切换清晰度,或在弱网环境下禁用大图加载。

获取网络类型主要依赖于 Network Information API（网络信息 API），这是一个由 W3C 和 WHATWG 推动的标准，但需要注意的是,该标准在不同浏览器中的支持程度和实现细节存在差异。

核心 API：navigator.connection

现代浏览器通过 navigator.connection 对象暴露网络信息,这是获取网络类型最直接的途径。

主要属性

代码实现示例

以下是一个完整的 JavaScript 示例,展示了如何安全地获取网络类型并监听网络变化。

function getNetworkInfo() { // 检查浏览器是否支持 navigator.connection if (navigator.connection || navigator.mozConnection || navigator.webkitConnection) { // 兼容不同浏览器的前缀 const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; console.log('网络类型 (type):', connection.type); console.log('有效类型 (effectiveType):', connection.effectiveType); console.log('下行速度 (downl

浏览器兼容性说明

Network Information API 的支持情况如下表所示：

注意：由于 Safari 和 iOS Safari 不支持该 API，在开发面向全平台的应用时,必须提供降级方案。

降级方案：navigator.onLine

如果目标用户包含大量使用 Safari 或 iOS 设备的用户，可以使用更基础的 navigator.onLine 属性作为降级方案。

• 优点：所有浏览器都支持。
• 缺点：只能判断“在线”或“离线”，无法区分是 Wi-Fi 还是 4G,也无法获取速度信息。

if (navigator.onLine) { console.log('设备已连接网络'); } else { console.log('设备已离线'); } // 监听在线/离线事件 window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus); function updateOnlineStatus() { const status = navigator.onLine ? '在线' : '离线'; console.log(`网络状态: ${status}`); }

最佳实践建议

1. 优先使用 effectiveType：相比 type，effectiveType 更能反映实际的用户体验质量（即使连接的是 Wi-Fi，如果信号弱或服务器慢，effectiveType 也可能返回 '3g'）。
2. 监听 change 事件：网络状态是动态变化的，务必监听 change 事件以实时调整应用行为。
3. 处理不支持的情况：对于不支持 navigator.connection 的浏览器，使用 navigator.onLine 作为基础判断,或默认假设用户处于良好网络环境。
4. 隐私考虑：该 API 提供的信息较为敏感,部分浏览器可能会限制其精度或要求用户授权。

相关问题与解答

问题 1：如何在 iOS Safari 中获取网络类型？

解答：

iOS Safari 不支持 Network Information API (navigator.connection)，苹果出于隐私保护和电池优化的考虑，未向 Web 开发者开放此接口。

替代方案：

1. 使用 navigator.onLine：只能判断是否在线,无法区分网络类型。
2. 服务端检测：在请求头中携带设备信息，由服务器根据 User-Agent 或 IP 段大致判断网络环境,但这并不准确。
3. 性能探测：通过发起一个小的资源请求（如加载一个 1KB 的图片），测量其加载时间，如果加载时间极短，可推测为 Wi-Fi 或 5G；如果较慢，则可能是 4G 或弱信号，但这是一种启发式方法，并非标准 API。

问题 2：navigator.connection.effectiveType 和 navigator.connection.type 有什么区别？

解答：

• type：表示物理连接类型，它返回 'wifi' 表示设备连接到了 Wi-Fi 路由器，返回 'cellular' 表示使用的是蜂窝移动网络,它不反映网络的实际速度或质量。
• effectiveType：表示有效连接类型，是基于 type、downlink（下行速度）和 rtt（往返时间）综合计算得出的体验质量。
  • 即使 type 是 'wifi'，Wi-Fi 信号极弱或带宽很低，effectiveType 可能会返回 '3g' 或 'slow-2g'。
  • type 是 'cellular' 且速度很快，effectiveType 可能返回 '4g'。

建议：在大多数场景下（如决定视频清晰度、是否加载高分辨率图片），应优先使用 effectiveType,因为它更贴近用户的实际体验。