Как определить статус онлайн и офлайн в JavaScript

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

Быстрый ответ: navigator.onLine и события Window

Браузер предоставляет два инструмента для определения статуса онлайн/офлайн в JavaScript:

• navigator.onLine — булево свойство, которое можно прочитать в любой момент
• события online и offline объекта window — срабатывают при изменении статуса подключения

Вместе они охватывают два сценария, которые вас интересуют: проверка статуса при загрузке страницы и реакция на его изменение.

Чтение navigator.onLine при загрузке страницы

if (navigator.onLine) {
  console.log('Browser reports online')
} else {
  console.log('Browser reports offline')
}

Это полезно для установки начального состояния UI при первой загрузке страницы — например, для отключения кнопки «Синхронизация», если пользователь уже находится в офлайн-режиме.

Прослушивание событий Online и Offline в JavaScript

Опрос navigator.onLine по таймеру расточителен. Вместо этого используйте события online и offline объекта window:

window.addEventListener('online', () => {
  console.log('Connection restored')
  // Re-enable UI, retry pending requests
})

window.addEventListener('offline', () => {
  console.log('Connection lost')
  // Show offline banner, disable network actions
})

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

Практический пример: отображение баннера офлайн-режима

Вот минималистичный, готовый к продакшену паттерн, который объединяет оба подхода:

const banner = document.getElementById('offline-banner')

function updateOnlineStatus() {
  banner.hidden = navigator.onLine
}

// Set initial state
updateOnlineStatus()

// React to changes
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)

<div id="offline-banner" hidden>
  You're offline. Some features may be unavailable.
</div>

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

Критическое ограничение navigator.onLine

Это та часть, которую большинство руководств недостаточно объясняют. navigator.onLine не подтверждает фактический доступ к интернету.

• false надежно — браузер определенно находится в офлайн-режиме.
• true означает только то, что устройство подключено к какой-то сети (маршрутизатору, VPN-адаптеру, локальной сети). Пользователь может находиться за captive-порталом, или ваш бэкенд может быть недоступен.

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

Проверка реального подключения с помощью сетевого запроса

Когда navigator.onLine возвращает true, но критическая операция завершается неудачей, подтвердите доступность с помощью легковесного запроса к вашему собственному бэкенду:

async function isReachable() {
  try {
    const response = await fetch('/health-check', {
      method: 'HEAD',
      cache: 'no-store',
    })
    return response.ok
  } catch {
    return false
  }
}

Используйте свой собственный эндпоинт — не сторонний URL — чтобы избежать проблем с CORS. Запрос HEAD к небольшому, быстрому маршруту минимизирует влияние на трафик.

Опционально: Network Information API

Для получения информации о качестве соединения (не только онлайн/офлайн), navigator.connection предоставляет такие свойства, как effectiveType ('4g', '3g', 'slow-2g') и downlink. Поддержка браузерами ограничена браузерами на базе Chromium — рассматривайте это только как прогрессивное улучшение.

Тестирование офлайн-поведения в DevTools

Откройте Chrome DevTools → вкладка Network → установите выпадающий список throttle на Offline. Это вызовет событие offline и установит navigator.onLine в false, позволяя вам тестировать UI без отключения вашей машины от сети.

Заключение

Определение статуса онлайн в JavaScript сводится к трем вещам: чтение navigator.onLine при загрузке, прослушивание событий online/offline для отслеживания изменений и проверка реального подключения с помощью fetch-запроса перед возобновлением критических операций. Эта комбинация чисто и эффективно обрабатывает подавляющее большинство реальных сценариев подключения.

Часто задаваемые вопросы

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.