Наверняка все, кто пользовался почтой от Google, хоть раз видели уведомления вроде этого:
Уведомления почты 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():
1 2 3 4 | Notification.requestPermission(function(permission){ // переменная permission содержит результат запроса console.log('Результат запроса прав:', permission); }); |
После выполнения метода, результат запроса на права будет лежать в переменной permission.
Вот её разные значения с пояснениями:
- default — запрос на получение прав не отправлялся;
- granted — пользователь разрешил показывать уведомления;
- denied — пользователь запретил показывать уведомления.
Получив права, можем приступать непосредственно к отправке уведомлений.
Делается это очень просто, одной строкой:
1 | var notification = new Notification(title, options); |
title — заголовок уведомления,
options (опционально) имеет следующие параметры:
body— тело уведомления (основной текст), в разных браузерах и ОС обрезается по-разному (например, в Chrome под Win 8.1 максимальная длинна – 200 символов);dir— направление отображения уведомления, может быть auto, ltr (слева направо) или rtl (справа налево);lang— язык уведомления;tag— уникальный идентификатор уведомления, с помощь которого можно заменить его другим уведомлением или удалить;icon— URL изображения, которое будет показано в уведомлении (рекомендуем разрешение 40×40 px).
Попробуем установить параметры и отправить уведомление:
1 2 3 | var notification = new Notification('Сколько ТЫЖ программистов нужно чтобы вкрутить лампочку?', { body: 'Только ты!', dir: 'auto', icon: 'icon.jpg' } ); |
Результат выполнения кода выше
Также у notification есть методы-обработчики событий onclick, onshow, onerror, onclose:
1 2 | function clickFunc() { alert('Пользователь кликнул на уведомление'); } notification.onclick = clickFunc; |
Результат:
При клике
Одна функция для всего
Теперь соберем всё в единую функцию и добавим несколько проверок на ошибки:
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 | function sendNotification(title, options) { // Проверим, поддерживает ли браузер HTML5 Notifications if (!("Notification" in window)) { alert('Ваш браузер не поддерживает HTML Notifications, его необходимо обновить.'); } // Проверим, есть ли права на отправку уведомлений else if (Notification.permission === "granted") { // Если права есть, отправим уведомление var notification = new Notification(title, options); function clickFunc() { alert('Пользователь кликнул на уведомление'); } notification.onclick = clickFunc; } // Если прав нет, пытаемся их получить else if (Notification.permission !== 'denied') { Notification.requestPermission(function (permission) { // Если права успешно получены, отправляем уведомление if (permission === "granted") { var notification = new Notification(title, options); } else { alert('Вы запретили показывать уведомления'); // Юзер отклонил наш запрос на показ уведомлений } }); } else { // Пользователь ранее отклонил наш запрос на показ уведомлений // В этом месте мы можем, но не будем его беспокоить. Уважайте решения своих пользователей. } |
Теперь у нас есть красивая функция, с помощью которой можно просто отправлять уведомления, не отвлекаясь на запрос прав или поддержку браузера:
1 2 3 4 5 | sendNotification('Верните Линуса!', { body: 'Тестирование HTML5 Notifications', icon: 'icon.jpg', dir: 'auto' }); |
Результат выполнения функции в разных браузерах:
Внешний вид уведомления в Chrome
Внешний вид уведомления в Firefox
Полезные ссылки: