Обзор и использование Web Notifications API

Современное общество немыслимо без развития и внедрения новых информационных систем и технологий, одно из которых связано развитием так называемых веб оповещений (Web notifications), позволяющих показывать пользователю какие-либо сообщения прямо в браузере. В ведущих браузерах, таких как: Chrome, Firefox, Opera уже поддерживается функция оповещения. Так, например, компания Google в своем продукте Chrome, начиная с 29 версии, внедрила Chrome Notification Center, что значительно расширило область использования браузера.

Причины использования веб оповещений:

• •    Сервисы, связанные с процедурой оповещения, становятся все более распространенными, в этой связи пользователи ожидают оповещения в том числе в веб-приложениях и на веб-сайтах.

• •    Центр оповещений сохраняет все уведомления в выпадающем списке. Когда пользователь будет просматривать его, он может вернуться на сайт и закончить ранее начатую задачу.

• •    Уведомления исполняются вне браузера. Это означает, что производители браузеров смогут адаптировать оповещения для разных устройств. Так, например, уведомление занимает много места на экране смартфона. Поэтому разработчики могут создать способ вывода оповещений вне браузера или в ненавязчивой форме.

Использовать уведомления не трудно. API веб уведомлений (Web Notifications API) дают для этого все необходимое. Для примера создадим функцию уведомления, при помощи которой появляется возможность ее вызова несколько раз.

• 1    function theNotification() { var n = ne. Notification("Hi!",  {

• 3           icon: 'icon.jpg',

• 4            tag: 'note'_Л

body: 'Notification content...'

• 6       });

• 7    }

• 8    I

Рис.1 Пример функции для вызова оповещения

Рассмотрим код, представленный на рисунке 1. Для того, чтобы создать уведомление, необходимо вызвать new Notification, где первый аргумент служит заголовком уведомления, а вторым аргументом передается объект со специальными настройками. Их 5 вариантов:

• •      dir : "ltr" или "rtl", направление текста уведомления.

• •     icon : URL до картинки, представляющей уведомление.

• •     tag : служит идентификатором для уведомления.

• •     body : Основное тело (текст) уведомления.

• •     lang : Код языка уведомления.

Из-за того, что интернет настолько открыт, невозможно разрешить использование уведомлений на каждом сайте. Поэтому, прежде чем показывать уведомления, необходимо получить разрешение от пользователя. Сделаем это при событии нажатия на кнопку.

Рис. 2 Запрос разрешения на показ уведомлений

На рисунке 2 приведен пример кода, который запрашивает у пользователя разрешение на использование уведомлений. Для этого используется метод Notification.requestPermission, который вернет строку: granted , denied , или default . Если это granted, то разрешение получено, denied – запрещено, default – запрос на разрешение был отклонен.

Главная проблема медленного развития веб-оповещений - система разрешения. Большинство пользователей полагает, что, если браузер спрашивает его, значит это должно быть опасно. Хуже всего, что пользователи часто игнорируют запрос разрешения на показ уведомления. Можно перенаправить пользователей, которые не ответили на запрос разрешения на страницу с просьбой включить уведомления.

• <    >Данный сайт использует уведомления! Нажмите "Уведомления!“

Ниже и разрешите браузеру их показывать. Это позволит снабдить Вас информацией для более удобного путешествия по сайтус/ >

• <    1й="Ьи1Топ“>Уведомления!      >

I window, addf vent Listener^ loadfunction() { van button document.querySelector("«button');

button.addEventListener('click’, function() { в          //If browser supports notifications

(Notification) {

• 8              // if th* notification is not denied

• 8                 (Notification.permission "denied") {

• 11                  Notification.requostPermission(function (status) {

(Notification.permission     status) {

14                           Notification.permission status;

15}

});

15}

26}

});

23       ' Sfit an Inttar^al ID whun notifications are granted or denied the browser will redirect

24 setlnterval(function() (

■(Notification.permission "granted" Notification.permission "denied") {

28               // Put the URL you tant to redirect to here.

»        }

33          500);

34 });

Рис. 3 Пример страницы с просьбой включить уведомления

Код, приведённый на рис. 3, повторно делает запрос на показ уведомлений и, получив однозначный ответ, перенаправляет пользователя обратно на сайт. Это избавит пользователя от любой двусмысленности о том, для чего ему будут показаны оповещения.

Поддержка оповещений браузерами

	Chrome	Firefox	Opera	Internet Explorer	Safari
Web Notifications	22	22	25	-	6