Webzone Публикации Javascipt Javascript - PUSH уведомление

Javascript - PUSH уведомление

18:45 , 12 Август 2019
Javascript - PUSH уведомление

Push Notifications - эти уведомления называются HTML5 Notifications, и они видны, даже если перейти в другую вкладку или вообще свернуть браузер.

 

Сейчас такие уведомления  работают в браузерах Chrome, Firefox (35+), Opera (27+), Safari (7.1+). Internet Explorer поддержки интернета уведомлений не имеет. Если рассматривать мобильные платформы, то частичная поддержка HTML5 Notifications есть только у Android Browser.

 

Перед тем, как непосредственно отправлять уведомления, нам нужно получить права на это. Сделать это можно методом Notification.requestPermission()



Notification.requestPermission(function(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: 'Body', dir: 'auto', icon: 'icon.jpg' }
);

Вопросы / Комментарии / Отзывы