Онлайн и офлайн мероприятия

Некоторые браузеры реализуют сетевые/автономные события из спецификации WHATWG Web Applications 1.0.

Обзор

Чтобы создать хорошее веб-приложение, поддерживающее работу в автономном режиме, вам необходимо знать, когда ваше приложение действительно находится в автономном режиме. Вам также необходимо знать, когда ваше приложение снова вернулось в статус «онлайн». Фактически, требования разбиваются как таковые:

  1. Вам нужно знать, когда пользователь вернется в сеть, чтобы вы могли повторно синхронизироваться с сервером.
  2. Вам нужно знать, когда пользователь находится в автономном режиме, чтобы вы могли поставить в очередь запросы сервера на более позднее время.

Именно этот процесс помогает в сетевых/автономных событиях для упрощения.

К сожалению, эти события не полностью надежны. Если вам нужна большая надежность или если API не реализован в браузере, вы можете использовать другие сигналы, чтобы определить, находитесь ли вы в автономном режиме, включая использование сервис-воркеров и ответы от XMLHttpRequest.

API

navigator.onLine — это свойство, которое поддерживает значение true / false ( true для онлайн, false для автономного режима).

Это свойство обновляется всякий раз, когда пользователь переключается в «автономный режим» (Файл → Автономная работа в Firefox). Кроме того, это свойство должно обновляться всякий раз, когда браузер больше не может подключаться к сети. Согласно спецификации:

Атрибут navigator.onLine должен возвращать false, если пользовательский агент не будет связываться с сетью, когда пользователь переходит по ссылкам или когда скрипт запрашивает удаленная страница (или знает, что такая попытка не удастся) …

Firefox 2 обновляет это свойство при переключении в/из автономного режима браузера. Firefox 41 обновляет это свойство также, когда ОС сообщает об изменении сетевого подключения в Windows, Linux и OS X.

Это свойство существовало в более старых версиях Firefox и Internet Explorer (спецификация основывалась на из этих предыдущих реализаций), так что вы можете сразу начать его использовать. В Firefox 2 реализовано автоматическое определение состояния сети.

События « в сети » и « offline »

Firefox 3 представляет два новых события: « в сети » и « offline ». Эти два события запускаются в каждой страницы, когда браузер переключается между интерактивным и автономным режимами. Кроме того, события всплывают из document.body в document , заканчиваясь window . Оба события нельзя отменить (вы не можете запретить пользователю подключаться к сети или отключаться).

Firefox 41 запускает эти события, когда ОС сообщает об изменении сетевого подключения в Windows, Linux. , и OS X.

Вы можете зарегистрировать слушателей для этих событий несколькими знакомыми способами:

  • с помощью addEventListener на window , document или document.body
  • , установив .online или .onoffline в свойствах document или document.body в JavaScript Function . ( Примечание: использование window.online или window.onoffline не будет работать по причинам совместимости.)
  • путем указания атрибутов ononline = "..." или onoffline = "..." в в разметке HTML.

Пример

Вот простой тестовый пример, который вы можно запустить, чтобы убедиться, что события работают (не работает в Chrome из-за присоединения прослушивателя событий к document.body).

Вот часть JavaScript:

   window.addEventListener ('load', function () {var status = document.getElementById ("status"); var log = document.getElementById ("log"); function updateOnlineStatus (event) {var condition =  navigator.onLine? "online": "offline"; status.className = condition; status.innerHTML = condition.toUpperCase (); log.insertAdjacentHTML ("beforeend", "Event:" + event.type + "; Status:"  + condition);} window.addEventListener ('онлайн', updateOnlineStatus)  ;  window.addEventListener ('offline', updateOnlineStatus);});  

Прикосновение к CSS

  {position: fixed;  ширина: 100%;  шрифт: полужирный 1em без засечек;  цвет: #FFF;  отступ: 0,5 мм;} {отступ: 2,5 мм 0,5 мм 0,5 мм;  font: 1em sans-serif;} {background: green;} {background: red;}  

И соответствующий HTML

 >> Это тест>  

Вот живой результат

Примечания

Если API не реализован в браузере, вы можете использовать другие сигналы, чтобы определить, находитесь ли вы в автономном режиме, включая использование сервисных рабочих и ответов от XMLHttpRequest.

  • Раздел «Сетевые/автономные события» из спецификации WHATWG Web Applications 1.0
  • Реализация отслеживания ошибок онлайн/офлайн-событий в Firefox и продолжение
  • Простой тестовый пример
  • Объяснение онлайн/офлайн-событий

Оцените статью
techsly.ru
Добавить комментарий