Как проверить состояние подключения к Интернету с помощью Async JavaScript

Можете ли вы использовать JavaScript, чтобы проверить, подключено ли ваше приложение к Интернету?

В этой статье я предоставлю обновленный ответ на этот вопрос об обнаружении подключения к Интернету. (Вот! Скажи это быстро пять раз!)

Решение будет использовать API aPI javaScript и асинхронный код с async & a ждать. Но сначала давайте посмотрим на принятое решение и обсудим, почему он не может быть лучшим выбором для вашего приложения.

navigator.onLine

Онлайн свойство интерфейса навигатора, Navigator.Online.online. часто используется для обнаружения онлайн и автономного состояния браузера.

По-видимому, в сочетании со слушателями для онлайн и автономных событий он предоставляет простое решение для разработчиков, которые легко реализовать.

Давайте посмотрим, как мы реализуем Navigator.online

Начните с добавления слушателя события нагрузки. Когда загорается событие нагрузки, слушатель проверит онлайн свойство интерфейса навигатора, а затем отобразит онлайн-статус.

Онмут онлайн-свойство навигатора предоставляет логический (истинный или ложный) ответ. Чтобы закончить действие слушателя, мы будем использовать тройное оператор для установки значения отображения состояния.

window.addEventListener("load", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = navigator.onLine ? "Online" : "OFFline";
});

Так почему же слово навигатор? Ну, это ссылка на браузер Netscape Navigator с 90-х годов.

Центр элемента H1 на вашей HTML-странице с идентификатором «Состояния». Если вы применяете код JavaScript выше на свою страницу, вы должны увидеть его отображение «онлайн».

Но это только обновляет элемент H1, когда страница загружает. Давайте добавим автономные и онлайн-слушатели событий, чтобы обновить отображение состояния в любое время или из этих событий.

window.addEventListener("offline", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "OFFline";
});

window.addEventListener("online", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "Online";
});

Мы можем перейти на вкладку Приложения Chrome DEV Tools и нажмите на ServiceWorker, чтобы установить браузер, чтобы ответить, как если бы оно в автономном режиме.

Проверьте и снимите флажок «Оффлайн». Вы должны увидеть отображение состояния немедленно реагировать на оффлайн и онлайн события, которые уволены.

Давайте копать немного глубже

При первом впечатлении, то вышесказанное кажется хорошим решением, которое довольно просто. К сожалению, поскольку мы читаем больше о онлайн-свойстве Navigator и Online и OffiLine событий, мы находим проблему.

Поиск навигатора .online на Caniuse.com Показывает широко распространенную поддержку онлайн | Автономный статус предоставляет недвижимость. Однако, глядя на заметки ниже таблицы поддержки, мы видим, что

Хм, это немного бросает гаечный ключ в работах.

Поэтому, если вы действительно хотите определить онлайн-статус браузера, вы должны разработать дополнительные средства для проверки.

Давайте также посмотрим на Ссылка MDN Docs для Navigator.Online Отказ MDN Web Docs поддерживает информацию о Caniuse.com и добавляет дополнительные заметки.

И это подтверждает наши опасения по поводу использования онлайн-свойства навигатора в качестве нашего решения для обнаружения подключения к Интернету. Это решение, которое может нанести ущерб нашим приложениям, которые зависят от знания, когда доступны внешние источники данных.

Одним из таких примеров является когда мы пытаемся определить, является ли прогрессивное веб-приложение или нет. MDN даже рекомендует,

Быстрый поиск веб-сайта «Навигатор онлайн не работает» Раскрывает различные посты форума, где в зависимости от этого свойства столкнулись с проблемами.

Так каково это решение?

Нам нужно знать, когда ваше приложение действительно подключено к Интернету, а не просто маршрутизатором или локальной сетью. Давайте вернемся к нашему файлу JavaScript и начать все сначала.

Идея состоит в том, чтобы сделать запрос и обрабатывать его изящно с ошибкой, если она не удастся. Если запрос добивается успеха, мы онлайн, и если это не удается, мы не можем.

Мы собираемся запросить небольшое изображение с интервалом, чтобы определить интернет-статус. Современный JavaScript предоставляет API и асинхронный код с Async и ждут. Мы будем использовать эти инструменты для достижения нашей цели.

Checkonlinestatus ()

Давайте начнем с создания функции Async Arrow CheckonLinestatus. Функция вернет True или False, как и свойство онлайн-навигатора.

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

Коды ответов HTTP от 200 до 299 указывают на успех, и мы вернем результат сравнения кода состояния. Это будет верно, если состояние ответа от 200 до 299 и ложь иначе.

Нам также необходимо предоставить комфортный блок, который ловит ошибку, если запрос не удается. Мы вернем ложь в блоке Catch, чтобы указать, что мы определенно оффлайн, если это произойдет.

const checkOnlineStatus = async () => {
  try {
    const online = await fetch("/1pixel.png");
    return online.status >= 200 && online.status < 300; // either true or false
  } catch (err) {
    return false; // definitely offline
  }
};

Далее мы будем использовать метод SetInterval и передаю его анонимную асинхронную функцию. Функция Async будет ожидать результата нашей функции CheckonLinestatus. Затем мы будем использовать тройное утверждение с результатом для отображения текущего онлайн-статуса.

Для тестирования этого примера установите задержку интервала до каждые 3 секунды (3000 миллисекундов). Это действительно слишком часто, хотя. Проверка каждые 30 секунд (30000 миллисекунд) может быть достаточно для ваших действительных потребностей.

setInterval(async () => {
  const result = await checkOnlineStatus();
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = result ? "Online" : "OFFline";
}, 3000); // probably too often, try 30000 for every 30 seconds

С нашим новым сохраненным кодом, давайте пересмотрим вкладку приложения в инструментах Chrome DEV для проверки автономного ответа.

Я почти забыл включить слушатель события нагрузки с Async-функционал! Обнаружение событий нагрузки, вероятно, важно только если у вас есть прогрессивное веб-приложение, использующее сервисный работник для автономной доступности. В противном случае ваша веб-страница или приложение просто не загружаются без подключения.

Вот новое слушатель событий нагрузки:

window.addEventListener("load", async (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = (await checkOnlineStatus())
    ? "Online"
    : "OFFline";
});

Финальная мысль

Вышеуказанный интервал код хорош для отображения состояния подключения в вашем приложении. Тем не менее, я не предлагаю полагаться на состояние подключения, которое было проверено на 20 или 30 секунд до получения критического запроса данных в вашем приложении.

Следовательно, вы должны вызвать функцию CheckonLinestatus непосредственно до запроса и оцените ответ перед запросом данных.

const yourDataRequestFunction = async () => {
    const online = await checkOnlineStatus();
    if (online) {
    	// make data request
    }
}

Заключение

В то время как Navigator.Online широко поддерживается, он обеспечивает ненадежные результаты при определении того, что наши приложения действительно связаны с Интернетом. Использование Fetch API и асинхронного JavaScript, мы можем быстро код более надежного решения.

Вот ссылка на код Gist на Github, и вот видеоурок, который я собрал вместе:

Оригинал: “https://www.freecodecamp.org/news/how-to-check-internet-connection-status-with-javascript/”