HTML5 Notifications – це просто: робимо повідомлення одним рядком, як у GMail

Напевно всі, хто користувався поштою від Google, хоч раз бачили повідомлення на кшталт:

Ці повідомлення називаються 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 Notificationsif (!("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'});

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

---

Корисні посилання:

• Підтримка HTML5 Notifications у різних браузерах
• Онлайн консоль, через яку можна зручно потестувати HTML5 Notifications