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' }
);