NetworkInformation API 是 navigator.connection 暴露的只读接口，用于获取网络类型、有效带宽估算等元信息，支持监听状态变化，但不能发起请求或传输业务数据。
NetworkInformation API 不能直接“取网络数据”，它只提供设备当前网络连接的元信息（比如是否在线、类型、有效带宽估算），不负责发起 HTTP 请求或传输业务数据。
NetworkInformation 是什么，能做什么
它是 navigator.connection 暴露的一个只读接口，用于监听网络状态变化。典型字段包括：type（"wifi"、"4g"、"bluetooth" 等）、effectiveType（"2g"、"3g"、"4g"、"slow-2g"）、downlink（估算下行 Mbps）、rtt（估算往返延迟 ms）。
它本身不发送请求、不解析响应、不替代 fetch 或 XMLHttpRequest。
- 适合做「自适应加载」：比如弱网时只加载缩略图、跳过视频自动播放
- 适合做「离线兜底提示」：监听
onchange事件，在type === "none"时展示离线 UI - 不适合做「数据拉取」：它没有
get()、send()、fetch()这类方法
如何安全访问 navigator.connection
该 API 不是所有浏览器都支持，且部分字段（如 downlink）在非 HTTPS 环境下会被禁用（Chrome 要求 secure context）。
立即学习“前端免费学习笔记（深入）”；
- 必须先检查
"connection" in navigator，否则在 Safari 或旧版 Edge 中会报TypeError: Cannot read property 'onchange' of undefined - HTTPS 是硬性前提：HTTP 页面中
navigator.connection可能存在但downlink和rtt返回0或undefined -
effectiveType在 Chrome 61+、Edge 79+、Firefox 93+ 支持；Safari 目前（截至 Safari 17）仍不支持
if ("connection" in navigator) {
const connection = navigator.connection;
console.log(connection.effectiveType); // e.g. "4g"
console.log(connection.downlink); // e.g. 10 (Mbps)
connection.addEventListener("change", () => {
console.log("Network changed:", connection.effectiveType);
});
} else {
console.warn("NetworkInformation API not supported");
}
常见误用：把它当 fetch 替代品
有人试图用 navigator.connection 直接“获取服务器返回的 JSON”，这是根本性误解。它不建立连接、不构造请求头、不处理 CORS、不解析响应体。
- 错误写法：
navigator.connection.fetch("/api/data")→ 报错：Cannot read property 'fetch' of undefined - 正确组合方式：用
connection.effectiveType决定是否发请求、发哪个版本的请求 - 例如：弱网时改用轻量接口
/api/data?lite=1，或延迟非关键请求
if (navigator.connection?.effectiveType === "slow-2g") {
fetch("/api/data?lite=1")
.then(r => r.json())
.then(data => renderLiteUI(data));
} else {
fetch("/api/data")
.then(r => r.json())
.then(data => renderFullUI(data));
}
兼容性差 + 信息粗糙，别依赖它做精确判断
effectiveType 是浏览器基于历史 RTT 和吞吐量估算的粗粒度分类，不是实时测量值；downlink 是平均估算，可能滞后数秒甚至更久；Android WebView 和 iOS WKWebView 行为也不一致。
- 不要用
downlink > 5当作“可以加载高清图”的绝对条件——用户实际带宽可能瞬间跌穿 - 不要监听一次就缓存结果——网络类型可能几秒内从
wifi切到4g，而事件监听没挂上就错过 - 生产环境建议叠加使用：结合
fetch的signal.timeout、首字节时间（TTFB）、资源加载耗时等真实指标做二次判断
真正决定“能不能取到数据”的，永远是 fetch 或 XMLHttpRequest 的执行结果，而不是 navigator.connection 的快照值。
