LETUNOFF DOCS

JS. Navigator.onLine

🧱 Суть

navigator.onLine – это Web API, которое позволяет определить, есть ли у пользователя сетевое подключение.

Оно возвращает:

  • true – устройство считается подключённым к сети
  • false – устройство находится офлайн
    Также браузер генерирует события online и offline при изменении состояния подключения.

📦 Проблема

1. Нужно знать, есть ли подключение к сети

Например:

  • показать сообщение “Нет подключения”
  • отключить отправку запросов
  • сохранить данные локально до восстановления сети

2. Необходимо реагировать на изменение статуса

Проверить состояние один раз недостаточно – пользователь может потерять или восстановить соединение во время работы приложения.

✅ Решение

Использовать:

navigator.onLine

и подписаться на события изменения подключения.

💻 Код

Проверка подключения

if (navigator.onLine) {
  console.log('Online');
} else {
  console.log('Offline');
}

Отслеживание изменений

Потеря соединения:

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

Восстановление соединения:

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

Когда использовать

Полезно для:

  • уведомления пользователя об отсутствии интернета
  • повторной отправки запросов после восстановления сети
  • работы офлайн-приложений (PWA)
  • отключения функций, требующих интернет-соединения

Важный момент

navigator.onLine не гарантирует, что интернет действительно доступен.

Например:

  • устройство подключено к Wi-Fi без доступа в интернет
  • локальная сеть есть, но сервер недоступен
    В таких случаях navigator.onLine может вернуть true.

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

🎯 Вывод

  • navigator.onLine показывает предполагаемый статус подключения
  • события online и offline позволяют реагировать на изменения сети
  • подходит для улучшения UX и поддержки офлайн-режима
  • не заменяет реальную проверку доступности сервера

🔗 Связано