网络信息 API
备注: 此特性在 Web Worker 中可用。
网络信息 API 提供关于系统连接的一般连接类型(如“wifi”、“cellular”等)的信息。应用程序可以根据用户的连接为用户展现不同清晰度的内容。
该接口由一个单例 NetworkInformation
对象组成,其实例由 Navigator.connection
属性或 WorkerNavigator.connection
属性返回。
接口
NetworkInformation
-
提供设备用来与网络通信的连接信息,并在连接类型发生变化时为脚本提供通知的方式。
NetworkInformation
接口不能被实例化。它可以通过Navigator
接口或WorkerNavigator
接口访问。
其他接口的扩展
-
返回一个
NetworkInformation
对象,其包含有关设备的网络连接的信息。 -
提供一个
NetworkInformation
对象,其包含有关设备的网络连接的信息。
示例
侦测连接状态变化
下面是一个侦测用户设备连接状态变化的例子。
let type = navigator.connection.effectiveType;
function updateConnectionStatus() {
console.log(
`设备的网络连接从 ${type} 变为了 ${navigator.connection.effectiveType}`,
);
type = navigator.connection.effectiveType;
}
connection.addEventListener("change", updateConnectionStatus);
预加载大型资源
连接对象对于决定是否预装占用大量带宽或内存的资源很有用。该示例将在页面加载后不久被调用,以检查可能不需要预加载视频的连接类型。如果发现有蜂窝网络连接,那么 preloadVideo
标志被设置为 false
。为了简单和清楚起见,此例子仅测试了一种连接类型。真实世界的用例可能会使用 switch 语句或其他一些方法来检查 NetworkInformation.type
的所有可能值。无论 type
值如何,你都可以通过 NetworkInformation.effectiveType
属性获得连接速度的估计值。
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
if (connection.effectiveType === "slow-2g") {
preloadVideo = false;
}
}
规范
Specification |
---|
Network Information API |
浏览器兼容性
api.NetworkInformation
BCD tables only load in the browser
api.Navigator.connection
BCD tables only load in the browser