Отправка уведомлений рабочего стола HTML5 для веб-браузеров

1. HTML5 уведомления в браузере
2. Как это устроено
3. Index.html
4. Заключение
5. Попробуйте PubNub сегодня!

Когда мы говорим о веб-технологиях, HTML редко встречается. Это основной язык почти всего веб-контента. Большая часть того, что вы видите на экране в вашем браузере, в основном описывается с использованием HTML. Точнее, HTML - это язык, который описывает структуру и семантическое содержание веб-документа.

По данным МДН ,

HTML5 является последним развитием стандарта, который определяет HTML , Термин представляет два разных понятия:

1. Это новая версия языка HTML, с новыми элементами, атрибутами и поведением,
2. больший набор технологий, позволяющий создавать более разнообразные и мощные веб-сайты и приложения. Этот набор иногда называют HTML5 & friends и часто сокращают до HTML5.

Вы можете найти больше информации о HTML5 Нажав здесь ,

HTML5 уведомления в браузере

В настоящее время мы наблюдаем изменение в поведении настольных / мобильных веб-сайтов. Веб-сайты начинают эмулировать поведение приложений; одним из них в основном являются уведомления. У пользователей есть несколько вкладок, которые открывают их браузер, и они получают уведомления внутри самого браузера, такие как сообщение чата, твит или уведомление Facebook.

В этом руководстве мы покажем, как интегрировать API-интерфейс уведомлений HTML5 для отправки и получения уведомлений и предупреждений в реальном времени в браузере. Вы можете узнать больше о методах и поддержке API уведомлений от Документы API уведомлений (MDN ).

В соответствии с Документы API для веб-работников в MDN Вот как работает HTML5 Notification API:

«ServiceWorkers, по сути, действуют как прокси-серверы, которые размещаются между веб-приложениями, браузером и сетью (при наличии). Они предназначены (помимо прочего) для создания эффективного автономного взаимодействия, перехвата сетевых запросов и принятия соответствующих действий в зависимости от того, доступна ли сеть, и обновлены ли ресурсы на сервере. Они также предоставят доступ к push-уведомлениям и API фоновой синхронизации ».

Как это устроено

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

Index.html

Он начинается с базового шаблона HTML5 с CDN для jQuery и PubNub.

<script src = "https://cdn.pubnub.com/pubnub-3.7.13.min.js"> </ script> <script src = "https://code.jquery.com/jquery-1.12.0 .min.js "> </ скрипт>

Затем внутри тега body мы добавили кнопку, вызывающую функцию JavaScript, для проверки функциональности уведомлений.

<button onclick = "notifyMe ()"> Уведомить меня! </ button>

Вот как выглядит функция notifyMe:

function notifyMe (message) {if (message == undefined) {message = "Привет! Вы нажали кнопку."; };

Здесь он проверяет, получает ли функция какие-либо параметры. Если нет, мы устанавливаем сообщение, так как при нажатии на кнопку сообщение не передается.

if (! («Уведомление» в окне)) {alert («Этот браузер не поддерживает уведомления на рабочем столе»); } else if (Notification.permission === "предоставлено") {var messages = new Notification (message); } else if (Notification.permission! == 'отказано') {Notification.requestPermission (функция (разрешение) {if (разрешение === "предоставлено") {var уведомление = новое уведомление ("Привет!");}} ); }

Этот блок проверяет, поддерживает ли браузер уведомления. Если он поддерживает, мы проверяем, были ли предоставлены разрешения на уведомления. Если нет, нам нужно запросить разрешение у пользователя. Если они позволяют, тогда мы можем перейти к созданию уведомлений и передать параметры сообщения в уведомление.

Итак, у нас есть базовый API для работы с HTML5-уведомлениями. Теперь нам нужно получить сообщения из канала PubNub и передать их в API уведомлений, чтобы эти уведомления действительно передавались в реальном времени.

. function (message) {console.log (message); notifyMe (message.text);}})});

Во-первых, как только документ или страница HTML загружены, мы инициализируем PubNub, используя ранее упомянутый CDN. Мы создаем экземпляр с помощью ключа подписки, так как требуется только подписка_ключа, если публикация на канале отсутствует. Затем мы советуем подписаться на канал «pubnub-html5 -tification-demo», и любое сообщение, которое проходит через него, передает его функции notifyMe в качестве параметра.

Заключение

Благодаря поддержке HTML5 новых функций, таких как доступ к API-интерфейсам устройств, семантике, офлайн-хранилищу и мультимедиа, становится ясно, что он остается здесь. Одним из мест, где вы уже можете увидеть, что он широко используется, является мобильный сайт Facebook. Даже когда вы просматриваете его и получаете новое уведомление, оно появляется на экране без обновления страницы, и это возможно с помощью API уведомлений HTML5.

Попробуйте PubNub сегодня!

Создавайте приложения реального времени, которые работают надежно и безопасно в глобальном масштабе.

Похожие

Комментарии