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), де необхідно підтримувати часткову або повну працездатність додатку в умовах відсутності інтернету.
| Порада: | Обробляючи подію |
| Порада: | Якщо у вашому додатку відправляються важливі дані, зберігайте їх у локальному сховищі ( |
| Порада: | Використання |
Синтаксис
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');
});