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

Автор оригинала: 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 сообщений, остальные появятся после закрытия видимых.
  • +32
  • 6,3k
  • 9
Поделиться публикацией

Похожие публикации

Комментарии 9

    0
    Главный недостаток существующего api в Хроме(в спеке он учтен) — невозможность повесить onclick на простую нотификацию и сделать что-то в «основном» окне из body.onclick htmlNotification.
    Совсем недавно мучались с этим недостатком, в итоге пришлось обойтись просто показом нотификации в нашем мессенджере.
    А вообще очень ждем ратификации API и реализации в других браузерах :)
      0
      а еще неплохо бы прямо в ОС эти уведомления реализовать. В МакОси есть growl, в Линуксе тоже какой-то notify, а в Винде надо запускать браузер, чтобы увидеть уведомления.
      0
      Прикольно! Гугл все ближе и ближе интергации всего и вся в браузер =)
        –1
        У них уже есть операционная система с одним только браузером, осталось превратить браузер в «операционную систему»:)
          +1
          А про Payment Request API не слышали еще?
          0
          «как например нажатие мыши на клавишу» — и кто бы мог подумать!?
            0
            Жалко, что Chrome не интегрирует оповещения с системой. В Ubuntu есть стандартная тема и поведение оповедений.
              0
              думаю, что это вопрос времени.
              0
              У когони-нибудь работает это в Хроме 25?

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое