css.in.ua
Підтримати

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, ви можете записати тимчасові помилки у лог для аналізу проблем із мережею. Це може бути корисно для зворотного зв'язку з користувачами або для діагностики проблем із доступом до мережі.
Порада:

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

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

Синтаксис

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

Значення

Return

Переглядачі

Переглядач

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: 'Тестове значення' }));
});

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

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

Спільнота

Зв'язок