HTML5 Notifications — это просто: делаем уведомления одной строкой, как в GMail

pic0

Наверняка все, кто пользовался почтой от Google, хоть раз видели уведомления вроде этого:

gmail_notifications

Уведомления почты gmail

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

После прочтения этой статьи вы сможете сделать такие же уведомления и для своего сайта. Код простой, кроссплатформенный, и непосредственно отправка уведомления занимает всего 1 строку на любимом JavaScript.

Также в конце статьи есть готовая функция, с помощью которой можно начать отправлять уведомления, не вникая в подробности.

Согласно сайту caniuse.com, сейчас такие уведомления (HTML5 Notifications) работают в браузерах Chrome, Firefox (35+), Opera (27+), Safari (7.1+). Internet Explorer поддержки интернета уведомлений не имеет. Если рассматривать мобильные платформы, то частичная поддержка HTML5 Notifications есть только у Android Browser.

Перед тем, как непосредственно отправлять уведомления, нам нужно получить права (permission) на это.
Сделать это можно методом Notification.requestPermission():

После выполнения метода, результат запроса на права будет лежать в переменной permission.

Вот её разные значения с пояснениями:

  • default — запрос на получение прав не отправлялся;
  • granted — пользователь разрешил показывать уведомления;
  • denied — пользователь запретил показывать уведомления.

Получив права, можем приступать непосредственно к отправке уведомлений.
Делается это очень просто, одной строкой:

title — заголовок уведомления,

options (опционально) имеет следующие параметры:

  • body — тело уведомления (основной текст), в разных браузерах и ОС обрезается по-разному (например, в Chrome под Win 8.1 максимальная длинна — 200 символов);
  • dir — направление отображения уведомления, может быть auto, ltr (слева направо) или rtl (справа налево);
  • lang — язык уведомления;
  • tag — уникальный идентификатор уведомления, с помощь которого можно заменить его другим уведомлением или удалить;
  • icon — URL изображения, которое будет показано в уведомлении (рекомендуем разрешение 40×40 px).

Попробуем установить параметры и отправить уведомление:

Снимок экрана (878)

Результат выполнения кода выше

Также у notification есть методы-обработчики событий onclick, onshow, onerror, onclose:

Результат:

Снимок экрана (855)

При клике

Одна функция для всего

Теперь соберем всё в единую функцию и добавим несколько проверок на ошибки:

Теперь у нас есть красивая функция, с помощью которой можно просто отправлять уведомления, не отвлекаясь на запрос прав или поддержку браузера:

Результат выполнения функции в разных браузерах:

Внешний вид уведомления в Chrome

Внешний вид уведомления в Chrome

firefox_notifications

Внешний вид уведомления в Firefox


 

Полезные ссылки: