Проверка доступности интернета Javascript

При разработке мобильных приложений под всяческими фреймворками периодически встает вопрос о том, как с помощью JavaScript проверить, есть ли подключение к интернету. В самом простом случае доступность интернета проверяется через navigator.online, которое возвращает статус браузера, а фактически, есть ли какое-нибудь подключение. И в принципе, выдаст true, если есть подключение к wi-fi И к локальному роутеру.

За частую хотелось бы все таки больше информации. Пингануть, к примеру, google.com или сайт, к которому собираемся так или иначе подключиться. Но здесь нам мешает «CORS»: Cross-Origin Resource Sharing («совместное использование ресурсов между разными источниками»), по которой браузер обрежет такой запрос, если он не разрешен «на той стороне». А он фактически всегда запрещен.

В итоге, для себя я остановился на варианте ping (условно) через картинку. В простейшем случае, пингуем фавикон гугла.

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Проверка доступности интернета</title>
</head>
<body>
<div id="plug">
Возможно, имеются какие-то проблемы с доступом к интернету
<input type="button" onclick="myFunction()" value="Проверить связь!">
</div>
<div id="plug1">
Где вайфай?
</div>
<script>
   function myFunction () {
      var imgg = new Image()
      imgg.onload = () => {
        // Здесь делаем что-то, что нужно сделать, если с интернетом все в порядке, 
        // к примеру заменяем "заглушку" на наш скрипт с другого сайта
        plug = document.getElementById('plug');
        plug.remove();
        const myScript = document.createElement('script');
        // myScriptr.src = 
        // или заменяем текст
        plug1 = document.getElementById('plug1');
        plug1.innerText = 'Ура. Связь есть';
        
      }
      try {
        imgg.src = 'https://google.com/favicon.ico'
      } catch {
        // console.log('ошибка')
      }
  }    
</script>
</body>
</html>

Можно повестить функцию на событие завершения загрузки документа или еще на какое…

Добавить комментарий

Ваш адрес email не будет опубликован.