navigator.connection 在多数桌面浏览器中不可用,移动端支持有限且 safari 完全不支持;需先检查存在性与非空,再验证 type 是否为有效字符串、downlink 是否大于 0;savedata 才是省流关键依据,type 仅反映接口类型而非实际网速。

navigator.connection 在绝大多数桌面浏览器中不可用,移动端 Chrome、Edge 和 Firefox 支持有限,Safari 完全不支持 —— 别指望它能稳定返回 type 或 downlink。
如何检测 navigator.connection 是否可用且有实际数据
不能只判断 navigator.connection 是否存在,很多浏览器(如 Safari、旧版 Chrome)会返回一个空对象或只带 onchange 的 stub 对象,但所有属性都是 undefined 或默认值(如 downlink: 0)。
- 先检查
"connection" in navigator且navigator.connection !== null - 再验证关键属性是否“可读”:
typeof navigator.connection.type === "string"且navigator.connection.type !== "unknown" - 对
downlink做容错:用Number(navigator.connection.downlink) > 0,避免NaN或0误导判断 - 不要依赖
rtt:Chrome 移动版返回的rtt常为0或50这类固定值,无实际参考意义
type 值的实际含义与常见误判场景
type 返回的是底层网络接口类型,不是用户感知的“网速快慢”。比如 "cellular" 可能对应 5G 高速,也可能只是弱信号下的 EDGE;"wifi" 也可能连着一个被限速的公共热点。
-
"bluetooth"和"ethernet"在移动设备上几乎不会出现,桌面端也极少由浏览器暴露 -
"none"表示设备已断网(navigator.onLine === false),但反过来navigator.onLine === true不代表type一定有效 -
"other"多见于某些定制 Android 系统或企业 MDM 环境,无法进一步区分,建议降级为“未知网络”处理 - 别把
"cellular"当作“该省流量”的唯一依据:iOS 低数据模式下,type仍是"cellular",但需额外检查navigator.connection.saveData
saveData 属性才是省流策略的关键开关
navigator.connection.saveData 是布尔值,由系统级省流设置(如 iOS 低数据模式、Android 数据节省程序)驱动,比 type 更可靠地反映用户真实意图。但它在桌面浏览器中基本不可用,且部分安卓 WebView 不同步系统设置。
- 必须配合
"saveData" in navigator.connection检查,不能直接访问 - 值为
true时,应立即停用高清图、视频自动播放、非关键 JS bundle 预加载等行为 - 注意:该值不会触发
change事件,需轮询或监听系统级事件(如 iOS 的webkitnetworkinfochanged,但兼容性极差) - fallback 方案:当
saveData不可用时,用downlink + <code>type === "cellular"组合粗略模拟
为什么 change 事件经常不触发或延迟严重
navigator.connection.onchange 在多数浏览器中响应迟钝甚至完全静默。Chrome for Android 仅在切换 Wi-Fi/蜂窝时触发,Wi-Fi 内部切换 SSID 或信号强度变化不会通知;Firefox 移动版常延迟数秒甚至不触发。
- 不要依赖它做实时 UI 切换(如右上角网络图标动画),它不是设计来服务高频状态更新的
- 更实用的做法:在页面关键节点(如路由跳转、资源加载前)主动读取一次
navigator.connection - 若必须监听变化,建议搭配
setInterval每 5–10 秒轮询type和saveData,并用Object.is()比较前后值防抖 - 注意内存泄漏:使用
addEventListener("change", handler)后,务必在组件卸载时调用removeEventListener
真正能落地的网络适配,靠的不是 navigator.connection 的理想化字段,而是对 saveData 的强依赖 + 对 downlink 的宽松阈值判断 + 对 type 的保守 fallback。浏览器给的从来不是“网络真相”,只是系统愿意透露的一点线索。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











