Атрибут onoffline тега <body>

Описание

Атрибут onoffline позволяет задать JavaScript-код, который выполняется при потере сетевого соединения. Это событие срабатывает, когда браузер переходит в автономный режим (offline).

Пример использования:
<body onoffline="handleOfflineStatus()"> <div id="network-status">Соединение активно</div> <script> function handleOfflineStatus() { const statusElement = document.getElementById('network-status'); statusElement.textContent = 'Вы в автономном режиме'; statusElement.style.color = 'red'; // Показываем уведомление пользователю alert('Соединение с интернетом потеряно. Некоторые функции недоступны.'); // Сохраняем данные локально if ('serviceWorker' in navigator) { navigator.serviceWorker.ready.then(registration => { registration.sync.register('save-data'); }); } } </script> </body>

Связанные события:

Событие Когда срабатывает
ononline При восстановлении соединения
navigator.onLine Свойство, возвращающее текущий статус

Рекомендации по использованию:

  • Используйте для уведомления пользователей о потере соединения
  • Реализуйте автономное хранение данных (localStorage, IndexedDB)
  • Предусмотрите механизм синхронизации при восстановлении связи
  • Для PWA используйте Service Worker для кэширования ресурсов
  • Тестируйте в разных браузерах и на разных устройствах

Важные замечания:

  • Событие может срабатывать с задержкой (5-10 секунд)
  • Не все браузеры одинаково точно определяют статус
  • На мобильных устройствах возможны ложные срабатывания
  • Для точного определения состояния сети используйте fetch()
  • Событие не срабатывает при первоначальной загрузке в offline

Современные подходы:

<script> // 1. Использование Network Information API if ('connection' in navigator) { navigator.connection.addEventListener('change', () => { console.log('Тип соединения изменился:', navigator.connection.effectiveType); }); } // 2. Периодическая проверка соединения setInterval(async () => { try { const response = await fetch('https://httpbin.org/get', { method: 'HEAD', cache: 'no-store' }); if (!navigator.onLine) window.dispatchEvent(new Event('online')); } catch { if (navigator.onLine) window.dispatchEvent(new Event('offline')); } }, 15000); // 3. Использование Service Worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(registration => { registration.update(); }); } </script>

Оптимизация для PWA:

  • Используйте Workbox для кэширования критических ресурсов
  • Реализуйте стратегию "Network falling back to cache"
  • Храните пользовательские данные в IndexedDB
  • Используйте Background Sync API для отложенной синхронизации
  • Предусмотрите автономную страницу в манифесте

Примечание: Для создания полноценного оффлайн-опыта в современных веб-приложениях рекомендуется использовать комбинацию Service Workers, Cache API и IndexedDB, а не полагаться только на события online/offline.