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

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


19 февраля 2013, 10:45. Разместил: Design FactoRy
Новые свойства 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.
Вернуться назад