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 є те, що вона спрацьовує не тільки при відновленні з'єднання, але й коли браузер вважає, що підключення до інтернету є стабільним і працездатним.

правити

Порада

Не завжди слід довіряти події online, особливо у випадках нестабільних з'єднань або при перемиканні між мобільними мережами. Варто додатково перевіряти мережеві запити на успішність, щоб упевнитись, що з'єднання справді стабільне.

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

Порада

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

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

Порада

Інколи подія online може спрацювати, навіть якщо інтернет-з'єднання слабке або ненадійне. Щоб впевнитись у справжній доступності мережі, можна відправити тестовий запит на сервер, наприклад, перевіривши статус відповіді.

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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));
});