Итак, в этой статье научимся пользоваться данным API, чтобы потом применить его на практике.
Взгляд на API
Конструктор
Чтобы создать новое уведомление для пользователя, мы должны создать новый экземпляр объекта Notification, с двумя параметрами:
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. Для начала создадим кнопку при клике по которой будет отображаться то самое уведомление. Кнопка выглядит так:
<button onclick="notifyMe()">Показать уведомление</button>
Переходим к разбору javascript, опишем функцию notifyMe():
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'
});
}
});
}
}
На этом все.