Определение того, находится ли пользователь в сети с помощью JavaScript

07.12.2022г.
Веб-разработка
1316

Время на прочтение: 2 мин.

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

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

Однако они потеряли связь под капотом, и ничего нового не загрузится.

Обнаружение статуса соединения

Мы можем использовать navigator.onLine API для определения статуса подключения. Это вернет логическое значение, чтобы указать, находится ли пользователь в сети.

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

window.addEventListener('offline', (e) => {
  console.log('offline');
});

window.addEventListener('online', (e) => {
  console.log('online');
});

Демо

Давайте настроим быструю демонстрацию, чтобы продемонстрировать это.

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

<div class='status'>
  <div class='offline-msg'>
    Вы офлайн 😢
  </div>
  <div class='online-msg'>
    Вы онлайн 🔗
  </div>
</div>

Давайте добавим немного основного стиля:

html,
body {
  padding: 0;
  margin: 0;
}
.status {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  &.offline {
    .online-msg {
      display: none;
    }
    .offline-msg {
      display: block;
    }
  }
  div {
    padding: 1rem 2rem;
    font-size: 3rem;
    border-radius: 1rem;
    color: white;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  .online-msg {
    background: green;
    display: block;
  }
  .offline-msg {
    background: red;
    display: none;
  }
}

Итак, как мы можем переключать их в зависимости от состояния сети?

const status = document.querySelector(".status");
window.addEventListener("load", () => {
  const handleNetworkChange = () => {
    if (navigator.onLine) {
      status.classList.remove("offline");
    } else {
      status.classList.add("offline");
    }
  };

  window.addEventListener("online", handleNetworkChange);
  window.addEventListener("offline", handleNetworkChange);
});

Да, этот фрагмент кода делает свое дело!

Мы инициализировали это при первой загрузке и создали новую функцию для проверки состояния навигатора.

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

При изменении он может добавить или удалить имя класса.

Если мы попробуем это выглядит так.