网络信息 API

注意： 此功能在 Web Workers 中可用。

网络信息 API 提供有关系统连接的信息，包括一般连接类型（例如，“wifi”、“蜂窝”等）。这可用于根据用户的连接选择高清内容或低清内容。

该接口包含一个 NetworkInformation 对象，该对象的实例由 Navigator.connection 属性或 WorkerNavigator.connection 属性返回。

接口

NetworkInformation

提供有关设备用来与网络通信的连接的信息，并提供了一种机制，使脚本能够在连接类型发生更改时收到通知。NetworkInformation 接口不能被实例化。它可以通过 Navigator 接口或 WorkerNavigator 接口访问。

对其他接口的扩展

返回一个 NetworkInformation 对象，其中包含有关设备网络连接的信息。

WorkerNavigator.connection 只读

提供一个 NetworkInformation 对象，其中包含有关设备网络连接的信息。

示例

检测连接变化

此示例监视用户连接的更改。

js
let type = navigator.connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    `Connection type changed from ${type} to ${navigator.connection.effectiveType}`,
  );
  type = navigator.connection.effectiveType;
}

navigator.connection.addEventListener("change", updateConnectionStatus);

预加载大型资源

连接对象对于决定是否预加载占用大量带宽或内存的资源很有用。此示例将在页面加载后不久调用，以检查连接类型，在这种情况下预加载视频可能不可取。如果找到蜂窝连接，则 preloadVideo 标志将设置为 false。为简洁起见，此示例仅测试一种连接类型。实际用例可能使用 switch 语句或其他方法来检查 NetworkInformation.type 的所有可能值。无论 type 值如何，您都可以通过 NetworkInformation.effectiveType 属性获得对连接速度的估计。

js
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}

规范

规范
网络信息 API

浏览器兼容性

api.NetworkInformation

BCD 表仅在浏览器中加载

api.Navigator.connection

BCD 表仅在浏览器中加载

另请参阅