Pull to refresh

Разбираемся с Notifications API

Website development
Original author: Ernest Delgado
Продолжаю серию переводов статей сайта html5rocks. Мы уже говорили про то, как внедрять шрифты, как работать с видео, сегодня мы поговорим про то как делать всплывающие сообщения в браузере с помощью Notifications API. Работает оно к сожалению пока только в Хроме, но есть уже начальная версия спецификации. Под катом подробности.

Для начала проверяем есть ли возможность использовать данный функционал:
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}


Имя webkitNotifications является временным — стандарт по-прежнему не утвержден.

Далее создаем само оповещение, которые может быть либо простым текстовым сообщением, либо html-ным. Ниже показана функция, которая создает оповещения обоих типов в зависимости от настроек:
function createNotificationInstance(options) {
if (options.notificationType == 'simple') {
return window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else if (options.notificationType == 'html') {
return window.webkitNotifications.createHTMLNotification('http://someurl.com');
}
}


Теперь мы переходим наверное к ключевому моменту создания оповещений — настроек безопасности. Любой из выше представленных методов выкинет ошибку безопасности, если нет соответствующих разрешений. Избежать этих ошибок можно с помощью try-catch или просто использовать метод checkPermission .
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
createNotificationInstance({ notificationType: 'html' });
} else {
window.webkitNotifications.requestPermission();
}
}, false);


Если разрешения еще не выданы, то мы увидим вот такое сообщение:

image

Здесь ключевым моментом является то, что метод requestPermission может быть вызван только в следствие какого-либо события, как например нажатие мыши на клавишу. Таким образом, нам всегда необходима активность пользователя, для того чтобы вывести сообщения.

Мы так же можем вызвать какие-то действия, связанные с появлением оповещением — менять цвет фона, проигрывать звук и так далее. Как это сделать — показано ниже:
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = createNotificationInstance({notificationType: 'html'});
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);



По ссылке можно посмотреть на пример загрузки последних твитов любого пользователя

И последний комментарий. На экране одновременно могут отображаться только 5 сообщений, остальные появятся после закрытия видимых.
Tags:html5rocksnotificationsapi
Hubs: Website development
Rating +32
Views 6.6k Add to bookmarks 70
Comments
Comments 9

Popular right now

Back end developer (Python/PHP, POST/GET API)
from 1,000 to 1,500 $InsightWhaleRemote job
Backend Development Engineer
from 200,000 ₽Pixel Networks LtdRemote job
Ruby on Rails - Middle - Public API
from 150,000 to 180,000 ₽igooodsСанкт-Петербург
Business Development Representative
from 1,000 $MixRankRemote job
Fullstack / Product Engineer
from 2,000 $MixRankRemote job

Top of the last 24 hours