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

Продолжаю серию переводов статей сайта 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);


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



Здесь ключевым моментом является то, что метод 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 сообщений, остальные появятся после закрытия видимых.