Здравствуйте, уважаемые читатели XoZbloga! Мы все привыкли к уведомлениям в браузере, мы получаем их находясь на таких сайтах как Facebook, Вконтакте, Google и др. Теперь с помощью HTML5 Notifications API, мы можем формировать и показывать уведомления пользователя средствами его браузера, поверх всех открытых окон. Итак, в этой статье научимся пользоваться данным API, чтобы потом применить его на практике.
Поддержка браузеров
Сразу нужно сделать поправку, данный API является рабочим проектом и корректно поддерживается только в браузерах Chrome, Mozilla и Safari. Более подробно здесь.
Взгляд на API
Конструктор
Чтобы создать новое уведомление для пользователя, мы должны создать новый экземпляр объекта Notification, с двумя параметрами:
1 | var notification = new Notification(title, options) |
title — заголовок уведомления;
options — данный параметр позволяет настроить уведомление. Он может иметь следующие свойства:
- dir: определяет в каком углу появится уведомление, принимает значения auto, ltr и rtl;
- lang: с помощью данного свойства можно уточнить на каком языке следует выводить уведомление;
- body: строковый параметр определяющий содержимое уведомления;
- tag: ID для данного уведомления, что позволяет производить различные манипуляции с уведомлением;
- icon: адрес изображения для использования в качестве иконки слева.
Методы
Статические методы
Эти методы доступны только для самого объекта Notification:
Notification.requestPermission() — Этот метод используется, чтобы спросить у пользователя разрешение для отображения уведомлений.
Методы экземпляра
Эти методы доступны для экземпляра объекта Notification:
Notification.close() — Этот метод позволяет программно закрыть уведомление.
Объект Notification также наследует методы от интерфейса EVENTTARGET (EventTarget.addEventListener, EventTarget.removeEventListener и EventTarget.dispatchEvent).
Свойства
Статические свойства
Эти свойства как и статические методы доступны только для самого объекта Notification:
Notification.permission — строка, содержащая текущее разрешение для отображения уведомлений. Возможные значения:
- denied (пользователь отказывается от использования уведомлений);
- granted (пользователь разрешает использование уведомлений);
- default (выбор пользователь неизвестен и поэтому браузер будет действовать, как при значении denied).
Свойства экземпляра
Эти свойства доступны для чтения у экземпляра объекта Notification:
- Notification.dir — получаем значение свойства расположения, указанное в параметрах конструктора.
- Notification.lang — код языка определенного в параметрах конструктора.
- Notification.body — контент уведомления указанный в параметрах конструктора.
- Notification.tag — идентификатор уведомления определенный в параметрах конструктора.
- Notification.icon — адрес изображения указанный в конструкторе.
Обработчики событий
Также у объекта Notification есть обработчики событий:
- Notification.onclick — обработчик для события щелчка. Срабатывает каждый раз, когда пользователь нажимает на уведомлении;
- Notification.onshow — обработчик для события отображения. Срабатывает, когда уведомление начинает появляться;
- Notification.onerror — обработчик при возникновении ошибок. Срабатывает каждый раз, при обнаружении сбоя в работе уведомлений;
- Notification.onclose — обработчик для события закрытия. Срабатывает, когда пользователь закрывает уведомление.
Создадим уведомление пользователя с помощью HTML5 Notifications API
Настало время применить на практике разобранный API. Для начала создадим кнопку при клике по которой будет отображаться то самое уведомление. Кнопка выглядит так:
1 | <button onclick="notifyMe()">Показать уведомление</button> |
Переходим к разбору javascript, опишем функцию notifyMe():
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | function notifyMe() { // Давайте проверим, поддерживает ли браузер уведомления if (!("Notification" in window)) { alert("Ваш браузер не поддерживает HTML5 Notifications"); } // Теперь давайте проверим есть ли у нас разрешение для отображения уведомления else if (Notification.permission === "granted") { // Если все в порядке, то создадим уведомление var notification = new Notification('Уведомление HTML5', { lang: 'ru-RU', body: 'Здесь какой-то контент уведомления...', icon: 'http://lorempixel.com/output/sports-q-c-100-100-9.jpg' }); } // В противном случае, мы должны спросить у пользователя разрешение else if (Notification.permission === 'default') { Notification.requestPermission(function (permission) { // Не зависимо от ответа, сохраняем его в настройках if(!('permission' in Notification)) { Notification.permission = permission; } // Если разрешение получено, то создадим уведомление if (permission === "granted") { var notification = new Notification('Уведомление HTML5', { lang: 'ru-RU', body: 'Здесь какой-то контент уведомления...', icon: 'http://lorempixel.com/output/sports-q-c-100-100-9.jpg' }); } }); } } |
На этом все. Остается только ожидать полной поддержки этой технологии от всех браузеров!
Источник статьи/урока: https://xozblog.ru
По материалам: https://developer.mozilla.org/en-US/docs/Web/API/Notification