Наверняка все, кто пользовался почтой от 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():
Notification.requestPermission(function(permission){
// переменная permission содержит результат запроса
console.log('Результат запроса прав:', permission);
});После выполнения метода, результат запроса на права будет лежать в переменной permission.
Вот её разные значения с пояснениями:
- default — запрос на получение прав не отправлялся;
- granted — пользователь разрешил показывать уведомления;
- denied — пользователь запретил показывать уведомления.
Получив права, можем приступать непосредственно к отправке уведомлений.
Делается это очень просто, одной строкой:
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).
Попробуем установить параметры и отправить уведомление:
var notification = new Notification('Сколько ТЫЖ программистов нужно чтобы вкрутить лампочку?',
{ body: 'Только ты!', dir: 'auto', icon: 'icon.jpg' }
);
Результат выполнения кода выше
Также у notification есть методы-обработчики событий onclick, onshow, onerror, onclose:
function clickFunc() { alert('Пользователь кликнул на уведомление'); }
notification.onclick = clickFunc;
Результат:
При клике
Одна функция для всего
Теперь соберем всё в единую функцию и добавим несколько проверок на ошибки:
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 {
// Пользователь ранее отклонил наш запрос на показ уведомлений
// В этом месте мы можем, но не будем его беспокоить. Уважайте решения своих пользователей.
}Теперь у нас есть красивая функция, с помощью которой можно просто отправлять уведомления, не отвлекаясь на запрос прав или поддержку браузера:
sendNotification('Верните Линуса!', {
body: 'Тестирование HTML5 Notifications',
icon: 'icon.jpg',
dir: 'auto'
});Результат выполнения функции в разных браузерах:
Внешний вид уведомления в Chrome
Внешний вид уведомления в Firefox
Полезные ссылки:
