Navigator.onLine не всегда работает

Ответ 1

MDN о navigator.onLine:

В Chrome и Safari, если браузер не может подключиться к локальной сети (LAN) или маршрутизатору, он отключен; все остальные условия верны. Поэтому, когда вы можете предположить, что браузер отключен, когда он возвращает ложное значение, вы не можете предположить, что истинное значение обязательно означает, что браузер может получить доступ к Интернету.

Как описано выше, это свойство не является надежным, поэтому, на мой взгляд, лучшим обходным решением является вызов ajax на серверной странице. Если браузер отключен, соединение не будет выполнено, и, таким образом, будет вызвано событие onerror. В противном случае событие onload вызывается:

function isOnline(no,yes){
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
    xhr.onload = function(){
        if(yes instanceof Function){
            yes();
        }
    }
    xhr.onerror = function(){
        if(no instanceof Function){
            no();
        }
    }
    xhr.open("GET","anypage.php",true);
    xhr.send();
}

isOnline(
    function(){
        alert("Sorry, we currently do not have Internet access.");
    },
    function(){
        alert("Succesfully connected!");
    }
);

Ответ 2

Как отметил Danilo Valente: свойство navigator.onLine не является надежным,

Но НЕ каждая ошибка в ответе ajax означает, что вы отключены от Интернета! Это может быть ошибка API (403 500 404....)

Если вы используете axios, вы можете различить эти ошибки следующим образом:

axios.request(options).catch(function(error) {
  if (!error.response) {
    // network error (server is down or no internet)
  } else {
    // http status code
    const code = error.response.status
  }
});