JS中監聽網絡情況的經常使用方法

1. navigator.onLine

返回的是布爾值。true表示在線，false表示離線。

onLine屬性只能簡單判斷網絡的斷開和鏈接狀態，而不能監聽網絡狀態的變化，例如從4g到3g。

function updateOnline() {
    console.log(navigator.onLine ? 'online' : 'offline');
}

window.addEventListener('online', updateOnline);
window.addEventListener('offline', updateOnline);

兼容性

2. navigator.connection

能監聽到具體的網絡變化（例如從4g變化到了3g），但不能監聽到是離線狀態仍是在線狀態。

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

connection.addEventListener('change', () => {
    // connection.effectiveType返回的是具體的網絡狀態：4g/3g/2g
    console.log(connection.effectiveType);
});

兼容性

能夠看到，connection的兼容性比較低，在實際開發中謹慎使用。