前端js監聽瀏覽器網絡變化

首先，爲何要讓前端判斷用戶的網絡狀態呢——爲了更好的用戶體驗。

其次，前端可否判斷網絡狀態？有哪些方法？

1，能夠作到漸進式判斷，不能作到絕對準確。
2，使用的是navigator.onLine或navigator.connection.rtt

根據我實際測試所得，

navigator.onLine 沒法及時獲取真實網絡狀態，好比手動把網線，使用定時器獲取navigator.onLine，始終是true，過好久才變成false(差很少至關於一個ajax的timeout時間)

navigator.connection 能夠實時監聽到網絡變化（延遲2-5秒），可是獲取到的網絡是一個模糊值
好比navigator.connection.rtt 是請求預估延遲xx ms,有時候是0毫秒的延遲，卻偏偏是已經斷網了。

因此我作了一下判斷：

const netWorkDownlink = navigator.connection.downlink; // 預估下載速度m/s

if (navigator.connection && navigator.connection.onchange === null) {
    navigator.connection.onchange=() => {
      if (netWorkDownlink !== navigator.connection.downlink || navigator.connection.rtt === 0) {
         //網絡斷開
      } else if (netWorkDownlink === navigator.connection.downlink || navigator.connection.rtt !== 0) {
         //鏈接到網絡
      }
   }
}

雖然不太準確，可是目前測試沒發現bug，
若是測試出了缺陷或者有更好的方法，歡迎評論。
——天天給你們分享點有用的知識。