JS властивість Event.online
Загальний опис
Подія online використовується для визначення, коли браузер відновлює підключення до мережі після того, як воно було втрачено. Це корисний інструмент для веб-додатків, які повинні реагувати на зміни в мережевому стані, дозволяючи їм знову синхронізувати дані або відновити мережеві операції.
Щоб використовувати цю подію, обробник подій додається до об'єкта window, який викликається, коли з'єднання з інтернетом знову стає доступним. Це дозволяє веб-додаткам автоматично оновлювати свій стан, надсилати раніше відкладені запити до сервера або повідомляти користувача про повернення онлайн.
Приклад базового використання:
window.addEventListener('online', function(event) {
console.log('Інтернет-з\'єднання відновлено.');
});
У цьому випадку, коли браузер відновлює підключення до мережі, у консолі з'являється повідомлення. Замість цього можна виконати інші дії, наприклад, оновити інтерфейс користувача або надіслати збережені дані на сервер.
Подія online є важливою складовою для створення додатків, що підтримують офлайн-режим. Вона дозволяє додатку автоматично відновлювати свою роботу, коли користувач знову підключається до мережі. Наприклад, якщо додаток намагався відправити дані в режимі офлайн і не зміг цього зробити, подія online може бути використана для повторного надсилання даних при відновленні з'єднання.
Використання цієї події може включати функції на кшталт синхронізації даних між локальним сховищем і сервером, оновлення інтерфейсу користувача або виконання будь-яких мережевих запитів, які були призупинені через відсутність з'єднання.
Ось приклад використання подій offline та online:
window.addEventListener('online', function() {
console.log('Ви знову в мережі.');
});
window.addEventListener('offline', function() {
console.log('Інтернет-з\'єднання втрачено.');
});
Це простий спосіб відстежувати, коли користувач втрачає або відновлює доступ до інтернету, і реагувати на ці події відповідним чином. Важливою особливістю події online є те, що вона спрацьовує не тільки при відновленні з'єднання, але й коли браузер вважає, що підключення до інтернету є стабільним і працездатним.
| Порада: | Не завжди слід довіряти події |
| Порада: | Використання події |
| Порада: | Інколи подія |
Синтаксис
window.addEventListener('online', function(event) {
// ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад дозволяє користувачеві вводити дані в форму і намагатися їх надіслати на сервер. Якщо користувач перебуває в офлайн-режимі, дані зберігаються в локальному сховищі, і при відновленні інтернет-з'єднання користувач отримує можливість надіслати збережені дані за допомогою кнопки. Цей приклад ідеально підходить для демонстрації, як події online та offline можуть допомагати у створенні додатків, що підтримують офлайн-режим.
У цьому прикладі після відновлення з'єднання додаток автоматично надсилає збережені в локальному сховищі дані на сервер для синхронізації. Це підходить для додатків, що працюють з тимчасовим офлайн-режимом і потребують синхронізації при поверненні в мережу.
window.addEventListener('online', function() {
console.log('З\'єднання відновлено. Спроба повторної синхронізації даних...');
const data = JSON.parse(localStorage.getItem('offlineData'));
if (data) {
// Відправляємо збережені дані на сервер
fetch('/save', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(response => response.json())
.then(data => {
console.log('Дані успішно синхронізовані:', data);
localStorage.removeItem('offlineData');
})
.catch(error => console.error('Помилка синхронізації:', error));
}
});Цей приклад показує, як при відновленні з'єднання перевіряти реальну доступність мережі. Використовуючи тестовий запит, додаток перевіряє, чи можна отримати відповідь від сервера, що гарантує наявність робочого з'єднання. Це корисно для додатків з нестабільним інтернетом.
window.addEventListener('online', function() {
console.log('Перевірка доступності ресурсу...');
// Перевіряємо реальну доступність мережі, роблячи запит
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (response.ok) {
console.log('З\'єднання стабільне. Можна продовжувати роботу.');
} else {
console.log('Мережа доступна, але ресурс недоступний.');
}
})
.catch(error => console.error('Помилка мережі:', error));
});