前端检测网络状态与强度的实现方案

前端提供了 navigator.connection 等 API 来检测用户的网络状态和强度。

1. 使用浏览器原生 API

1.1 navigator.connection (Network Information API)

获取网络类型、带宽估算和 RTT（往返延迟）：

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if(connection){ 
    console.log("网络类型:", connection.effectiveType); // '4g', '3g', '2g'
    console.log("下行带宽:", connection.downlink +" Mbps"); // 估算值
    console.log("往返延迟:", connection.rtt +" ms");
    console.log("数据节省模式:", connection.saveData); // 是否开启省流模式
    // 监听网络变化
    connection.addEventListener("change",()=>{
        console.log("网络状态变化:", connection.effectiveType);
    });
}

兼容性：Chrome/Edge/Android WebView 支持，Safari 和 Firefox 部分支持。

1.2 在线/离线状态检测

// 检测当前状态
console.log("是否在线:", navigator.);

.(,  .());
.(,  .());