Используем HTML5 Notifications API

      HTML

Здравствуйте, уважаемые читатели 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'
      });
      }
    });
  }
}

На этом все. Остается только ожидать полной поддержки этой технологии от всех браузеров!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!


Lingualeo