—»     —»   Heyoffline.js: оповестите ваших пользователей о том, что у них прервалось соединение с Интернетом
  Раздел: Скрипты и коды   Нет комментариев  

Heyoffline.js: оповестите ваших пользователей о том, что у них прервалось соединение с Интернетом



Новые свойства HTML5 предлагают нам возможность использовать события online и offline, посредством которых можно проверять наличие соединения с Интернетом. Такие оповещения особенно важны при разработке приложений, так как потеря сети может привести и к потере данных. javascript-библиотека Heyoffline.js предлагает нам полноценный функционал, помогающий реализовать это.

Heyoffline.js: оповестите ваших пользователей о том, что у них прервалось соединение с Интернетом

Проверка подключения

Принцип работы Heyoffline.js очень прост: как только браузер ощущает потерю соединения с Интернетом, посредством js-инструмента отображается оповещение, чтобы люди могли знать, что с их соединением что-то не так. Чтобы использоваться Heyoffline.js, в целом достаточно просто встроить скрипт в шапку HTML-документа. К тому же, вам будут представлены несколько опций по оформлению и определения образа действия библиотеки.

По умолчанию Heyoffline.js отображает сообщение при каждом обрыве связи. В большинстве случаев это раздражает, и поэтому мы рекомендуем вам использовать менее частый способ оповещений. Говоря о веб-приложениях, оповещения будут очень полезны, когда нужно подтверждать какие-то данные, и разъединение может привести к потере всех введенных данных. Чтобы ограничить Heyoffline.js таким образом действия, мы можем использовать опцию monitorFields:

new Heyoffline({
monitorFields: true,
elements: ["input", "select", "textarea", "*[contenteditable]"]
});

Опция elements отвечает за элементы, за которыми будет вестись слежение. Перечень нашего примера представляет стандартные значения.

Heyoffline.js: оповестите ваших пользователей о том, что у них прервалось соединение с Интернетом

Оповещение всегда содержит кнопку, которая позволяет пользователям закрыть сообщение. Если вам потребуется или захочется, вы можете убрать эту кнопку. Только при этом пользователь не сможет закрыть оповещение:

new Heyoffline({
disableDismiss: true
});

В данном случае оповещение будет открыто до тех пор, пока соединение с интернетом не восстановится. Так как сообщение покрывает все окно браузера, этот метод не очень подходит разработчикам. Пользователи точно не одобрят такой механизм. Хотя это все же предотвратит потерю данных.

Как персонализировать оповещения

Heyoffline.js предлагает несколько опций персонализации внешнего вида оповещений. Вы можете выставить собственный заголовок, собственное сообщение и текст кнопки:

new Heyoffline({
text.title: "Heading",
text.content: "WarningMessage",
text.button: "Close Alert"
});

javascript используется для генерации окна оповещения. Окно состоит из нескольких HTML-элементов, которые обозначены классовой приставкой heyoffline_:

Само окно представляет собой DIV (heyoffline_modal), содержащий элемент H2 (heyoffline_heading), элемент P (heyoffline_content) с оповещением, а также A-элемент для кнопки (heyoffline_button). Здесь также присутствует опция на случай, если вам потребуется создать ваш собственный префикс, а также опция для отключения всех CSS-классов:

new Heyoffline({
prefix: "YourOwnClass",
noStyles: true
});

Завершение

Heyoffline.js – очень удобный инструмент, который гибко реагирует на изменения в соединении с Интернетом. Процесс установки и настройки этого скрипта невероятно прост. Последняя версия, 1.0, не использует какие-либо платформы и доступна бесплатно под лицензионным соглашением MIT.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript
Опубликовал Design FactoRy   Прочитано (раз): 5374   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930