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

Хорошей практикой в таких случаях является уведомление пользователя о наличии соединения с Интернетом.

Определение статуса соединения

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

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

При загрузке страницы можно узнать о наличии сети:

window.addEventListener('load', () => {
  const status = navigator.onLine;
});

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

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

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

Рассмотрим пример с базовым текстовым элементом в центре экрана, информирующими пользователя о статусе его подключения к сети. При этом будем считать, что во время загрузки страницы подключение к Интернету есть:

<div class="status">
  <div class="offline-msg">You're offline 😢</div>
  <div class="online-msg">You're connected 🔗</div>
</div>

Для стилизации элементов используется SCSS:

.status {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  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;
  }
}

Теперь нужно добавить класс, который позволит переключаться между онлайн и офлайн состояниями:

.status {
  &.offline {
    .online-msg {
      display: none;
    }
    .offline-msg {
      display: block;
    }
  }
}

Теперь, если к родительскому div добавить класс offline появится сообщение об отсутствии Интернета offline-msg.

Осталось создать скрипт для переключения между состояниями онлайн и офлайн:

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);
});

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

Спасибо за внимание.

Перевод статьи Chris Bongers “Detecting if the user is online with JavaScript”.