動態偵測瀏覽器在線狀態

瀏覽器的在線狀態(online status)可以利用 navigator.onLine 來檢查, 而且可以利用 windows 的 connection events 來進行動態的監聽, 以達成偵測瀏覽器的在線狀態。

來看看程式碼:

function networkChanged(status){
  networkStatus = status ? "online":"offline";
  document.write("network status = " + networkStatus + " " + new Date() + "<br>")
}

window.addEventListener("load", function(){
  networkChanged(navigator.onLine);

  window.addEventListener("online", function(){
    networkChanged(true);
  });

  window.addEventListener("offline", function(){
    networkChanged(false);
  });
});

簡單說明一下, 其中的 networkChanged 是用來處理傳入在線狀態, 輸出在瀏覽器上的內容程式, 而實際的狀態偵測則是在下面的程式碼。 而一開始需要先註冊一個 window.load 事件, 先執行一次 navigator.onLine 狀態的回傳, 然後同時再註冊兩個事件, window.online 與 window.offline 事件, 一樣分別把狀態回傳給 networkChanged handler 即可取得輸出結果。

參考在 codepen 上的結果:

參考資料:

https://developer.mozilla.org/en-US/docs/Web/API/Window#Connection_events

https://dev.to/nialljoemaher/detecting-if-a-user-is-online-offline-with-javascript-3bcc