网络检测

2025年02月13日

柏拉文

越努力，越幸运

一、认识

---

网络检测: 通过监听 navigator.connection change / window online / window offline 事件来实现

1. 在 window online 网络恢复事件中, 继续网络任务

2. 在 window offline 网络中断事件中, 暂停网络任务

3. 在 navigator.connection change 事件中, 获取 navigator.connection.downlink 当前网速, 判断 downlink, navigator.connection.downlink < 1 Mbps，暂停上传任务; navigator.connection.downlink > 1 Mbps，继续上传任务

二、实现

---

function initNetworkEventListener() {
    navigator.connection.addEventListener("change", () => {
      const { downlink, effectiveType } = navigator.connection;
      const online = navigator.onLine;
      console.log(`🌐 当前网络速度：${downlink} Mbps，类型：${effectiveType}`);

      if(downlink !== undefined && downlink < 1){
        console.log("🌐 当前网络速度非常慢，不适合网络请求");
      }
    });

    window.addEventListener("online", () => {
      console.log(`🌐 当前网络已恢复`);
    });

    window.addEventListener("offline", () => {
      console.log(`🌐 当前网络已断开`);
    });
}

initNetworkEventListener();