Как на JavaScript проверить наличие интернета — онлайн или офлайн?

Question

[med1um]

Ищу решение. Сам пока пользуюсь такой функцией:

function isOnline() {
    var url = 'http://example.com/?' + Date.now(); // url любой
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, false); // sync
    try {
       xhr.send();  //  Когда нет интернета - происходит "NetworkError" и срабатывает catch{}
       return xhr.status === 200 ? true : false;
    } catch (err) {
       return false;
    }
}

Обязательное требование: поддержка IE11.

Что скажете? Может быть есть способы лучше? Какой способ используете вы?

Answer 1

[profesor08]

https://levelup.gitconnected.com/detecting-online-...

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

function updateOnlineStatus(event) {
  var condition = navigator.onLine ? "online" : "offline";
  document.body.className = condition;
}

Способ 2

async function isOnline() {
  try {
    await fetch("https://google.com");
    return true;
  }

  return false;
}

Comments

[med1um]

прикольно... а ты сам свой ответ решением отметил?

[Pavel M]

здорово, спасибо. 1 способ просто класс

Answer 2

[Роман Андреевич]

Сделайте просто пинг запрос на бек. Если ответ есть значит вы online. Поставьте таймер раз в минуту секунду или еще что-то и в глобальный стейт сохраняйте результат. Все архи просто, если off то сети нет, если on сеть есть

В целом ваш код этим и занимается, простой и быстрый способ, не нужно тут выдумывать велосипед даже

Answer 3

[zkrvndm]

Не уверен, но попробуйте через генерацию фрейма и последующего отслеживания события onload на нем. После наступления загрузки попробуйте получить доступ к контенту фрейма, если получилось, то значит интернет есть, если не получилось, то интернета нет и внутри фрейма сейчас висит заглушка. Это должно работать в том числе и IE11.

Answer 4

[Виктор Сиротин]

Ваше решение можно сделать поинтнереснее для пользователя.
Например, Network Error часто означает, что нет связи с ближайшим WiFi/Router.
Иногда это недокументированный статус 0.
Статус 503 означает, что желаемый сервер недоступен.
Соответственно, пользователя можно точнее информировать и разное советовать в зависимости от результата.