JS властивість Event.offline

Загальний опис

Подія offline використовується для відстеження моменту, коли браузер втрачає з'єднання з інтернетом. Це важливий інструмент для побудови веб-додатків, які повинні реагувати на зміну стану мережі, дозволяючи зберігати дані локально або змінювати спосіб взаємодії з користувачем.

Щоб використовувати цю подію, потрібно додати обробник подій до об'єкта window, який відреагує на момент, коли пристрій користувача втратить доступ до мережі. Відразу після цього браузер викличе відповідний код, що дозволяє додатку адаптуватися до офлайн-режиму.

Приклад базового використання:

window.addEventListener('offline', function(event) {
  console.log('З'єднання з інтернетом втрачено.');
});

У цьому випадку, коли пристрій користувача втрачає підключення до мережі, в консолі буде виведено повідомлення. Ви можете виконати інші дії, такі як збереження важливої інформації в локальне сховище або відображення повідомлення користувачу про відсутність доступу до інтернету.

Подія offline є частиною механізму для обробки змін у мережевому стані. Вона спрацьовує кожного разу, коли браузер визначає, що більше не має активного інтернет-з'єднання. Для коректного функціонування додатків, які підтримують офлайн-режим, потрібно також враховувати подію online, яка спрацьовує, коли підключення до інтернету відновлюється.

Якщо ваш додаток зберігає важливі дані, варто впровадити механізм відкладеного надсилання даних, які користувач намагається відправити в режимі офлайн, а потім синхронізувати їх з сервером, коли з'єднання відновиться.

Ось приклад поєднання подій offline та online:

window.addEventListener('offline', function() {
  alert('Ви втратили інтернет-з\'єднання.');
});

window.addEventListener('online', function() {
  alert('З\'єднання з інтернетом відновлено.');
});

У цьому прикладі браузер відстежує обидва стани – втрату та відновлення з'єднання – і відповідно інформує користувача.

Подія offline особливо корисна для розробників прогресивних веб-додатків (PWA), де необхідно підтримувати часткову або повну працездатність додатку в умовах відсутності інтернету.

правити

Порада

Використання offline у поєднанні з online дозволяє не просто реагувати на зміну мережевого статусу, а й показувати користувачу інтерфейсні підказки, що допоможуть уникнути незрозумілих помилок. Наприклад, можна відключити функціональність, що вимагає інтернету, поки з'єднання не відновиться.

автор: Bond правити

Порада

Обробляючи подію offline, ви можете записати тимчасові помилки у лог для аналізу проблем із мережею. Це може бути корисно для зворотного зв'язку з користувачами або для діагностики проблем із доступом до мережі.

автор: Bond правити

Порада

Якщо у вашому додатку відправляються важливі дані, зберігайте їх у локальному сховищі (localStorage або IndexedDB), коли користувач перебуває в режимі офлайн. Потім при відновленні з'єднання дані можуть бути синхронізовані з сервером. Це забезпечить збереження користувацьких даних, навіть якщо інтернет-з'єднання буде перервано.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

window.addEventListener('offline', function(event) {
  // ваш код тут
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

window.addEventListener('offline', function() {
  console.log('Немає з\'єднання. Починаємо зберігання в локальне сховище.');
  localStorage.setItem('pendingData', JSON.stringify({ id: 1, value: 'Тестове значення' }));
});

window.addEventListener('offline', function() {
  console.log('З\'єднання втрачено. Показуємо користувачу повідомлення про офлайн.');
  document.body.classList.add('offline-mode');
});