
Дізнайтесь більше про нові кар'єрні можливості в 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?