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

  • , Статьи
  • 3 минуты

Наверняка все, кто пользовался почтой от 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():

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' }
);
Снимок экрана (878)

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

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

function clickFunc() { alert('Пользователь кликнул на уведомление'); }
notification.onclick = clickFunc;

Результат:

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

При клике

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

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

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

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

firefox_notifications

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

 

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

Наши тесты для вас:
— Тест на знание сленга веб-разработчиков.
— Кто вы во вселенной Звёздных Войн?
— А вы точно программист?