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


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Напевно всі, хто користувався поштою від 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 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'});

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

Зовнішній вигляд повідомлення в Chrome

Зовнішній вигляд повідомлення в Firefox


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

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *