使用JavaScript檢查用戶的網絡連接
創建一個偉大的網站，卻讓用戶由于網絡連接而無法瀏覽，這是你可能遇到的比較大的噩夢之一。通常用戶沒有意識到，雖然你的網站運行良好，但他們的網絡連接有問題。
如果用戶在瀏覽你的網站時與互聯網斷開連接，JavaScript提供了一種與用戶進行通信的簡單方法。
這涉及JavaScript navigator API和 window 對象上的eventListener，這將幫助我們跟蹤用戶的連接性。
onLine屬性返回一個布爾值，該值指定瀏覽器處于online模式還是offline模式
你可能希望向用戶添加一條小的彈出消息，告知他們已斷開連接，一旦它們重新聯機，就歡迎他們回到你的網站。
你應該將這些事件監聽器添加到加載事件監聽器中，這樣當用戶訪問(加載)你的網站時，它們就會被初始化。
showOnlineStatus 函數可以幫助您向用戶顯示自定義消息。例如，如下所示：
根據連接狀態顯示自定義消息
您可以在CodePen上找到上述示例的完整源代碼。
CodePen：https://codepen.io/varunjoshi995/pen/MWazKjB
但是，此屬性可能并不完全可信，如MDN所述：
在Chrome和Safari中，如果瀏覽器無法連接到局域網(LAN)或路由器，則表明該瀏覽器處于脫機狀態;所有其他條件都返回true。所以，當瀏覽器返回一個 false 值時，你可以認為它是離線的，但你不能認為 true 值一定意味著瀏覽器可以上網。
這意味著 navigator.onLine 屬性可能會導致誤報。因此，我們可能需要考慮其他確定方法。
這些方法之一是使用OfflineJS，這是一個很酷的庫，用于通知您的用戶他們已失去與您網站的連接。它提供了精美的主題，幾乎不需要配置。
OfflineJS：https://github.hubspot.com/offline/docs/welcome/
如果你不想使用OfflineJS，比較好的解決方法是調用服務器端API。如果客戶端/用戶處于脫機狀態，則API調用將失敗并返回錯誤響應。如果你使用的是Axios，可能會丟失 error.response，這可能意味著客戶端/用戶處于離線狀態。
上面的示例與 navigator.onLine 屬性一起可以幫助避免誤報，并且你可以確定用戶是否連接到Internet或網絡。
希望對您有所幫助!現在，你可以通知用戶是否連接到互聯網。對于用戶訪問您的網站而言，這僅意味著更好的體驗!
編碼愉快!
