Категория:
Опубликовано:

Notification API - Уведомления на рабочем столе

Browser Notification

Современные браузеры поддерживают уведомления.

Браузеры уважают личное пространство своих пользователей, потому спрашивают разрешения на показ уведомлений. Можно дать разрешение на показ уведомлений на 1 сеанс, или же на постоянно. Так же можно запретить уведомления.

Наверняка Вы их встречали, установив дополнения в свой браузер, или на современных сайтах.

Рассмотрим как можно выводить уведомления на своем сайте.

Примеры уведомлений:

Notification

Поддержка браузерами: *

  • Chrome - начиная с версии 22
  • Firefox (Gecko) - начиная с версии 22
  • Opera - начиная с версии 25
  • Safari - начиная с версии 6 (только Mac OSX 10.8+)
  • Internet Explorer - как всегда, не поддерживает

Поддержка мобильными браузерами: *

  • Firefox OS - начиная с версии 1.2
  • Chrome for Android - поддерживает
  • Android Webview - поддерживает
* На момент написания поста.

Создаем уведомления

Уведомления выводятся посредством обычного javavscript'а, потому, в Вашем js-файле добавляем следующую конструкцию:

function myNotification(titleNotify, optionsNotify) {

  // Проверим поддерживает ли браузер уведомления
  if (!('Notification' in window)) {
    // Если не поддерживает - выводим соответствующее сообщение
    alert('Ваш браузер не поддерживает уведомления рабочего стола');
  }

  // Проверяем есть ли  у нас разрешение показать уведомление
  else if (Notification.permission === 'granted') {
    // Если есть - создаем уведомление
    var notification = new Notification(titleNotify, optionsNotify);
  }

  // Если разрешения нет - спросим разрешения показать уведомление
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // Если пользователь разрешает - создаем уведомление
      if (permission === 'granted') {
        var notification = new Notification(titleNotify, optionsNotify);
      }
    });
  }
}

Таким образом мы создали функцию, с помощью которой сможем выводить уведомления.

В функцию нужно передавать 2 параметра:

  • titleNotify - Заголовок уведомления
  • optionsNotify - Дополнительные опции уведомления

При этом, optionsNotify является объектом со своими свойствами, и вот некоторые из них:

  • body - Основное содержимое уведомления
  • icon - Иконка уведомления
  • tag - Категория уведомления (позволяет группировать похожие уведомления, заменяя их более новыми)

Создаем HTML-страничку:

Рассмотрим пример. В примере будет использовать jQuery, поэтому убедитесь что он у Вас подключен:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Добавим элемент на страницу, по которому будем кликать, и вызывать уведомления:

<span>Click Me</span>

В js добавляем уже знакомую нам функцию:

function myNotification(titleNotify, optionsNotify) {

  if (!('Notification' in window)) {
    alert('Ваш браузер не поддерживает уведомления рабочего стола');
  }

  else if (Notification.permission === 'granted') {
    var notification = new Notification(titleNotify, optionsNotify);
  }

  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      if (permission === 'granted') {
        var notification = new Notification(titleNotify, optionsNotify);
      }
    });
  }
}

И ниже пишем обработчик события "клик", по нашему элементу:

jQuery(document).ready(function($){
  $('span').bind('click', function(){
    var titleNotify = 'Это Blogpost';
    var textNotify = 'Вот так отображается уведомление на рабочем столе';
    var iconNotify = $('[type="image/vnd.microsoft.icon"]').attr('href');
    var optionsNotify = {
      body: textNotify,
      icon: iconNotify,
      tag: 'blogpost'
    }
    myNotification(titleNotify, optionsNotify);
  });
});

Можете посмотреть пример того что получилось:

Теги: 
Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.