Оповещения в браузере (HTML5 Notifications)

В HTML 5 появилась возможность показывать уведомления.

Пример уведомления в Chrome

При выполнении кода, пользователь увидит данное уведомление, даже если он находится на другой вкладке (или если браузер свёрнут).

Данная технология называется «HTML5 Notifications».

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

Notification.requestPermission(function(permission){
    permission; // результат запроса
});

В переменной Notification.permission хранится значение, можно ли отправлять браузеру пользователя оповещение.

Notification.permission; // granted (оповещения разрешены)

В данной переменной могут содержаться три значения:

1. default — запрос на получение прав не отправлялся;
2. granted — пользователь разрешил показывать уведомления;
3. denied — пользователь запретил показывать уведомления.

Если пользователь разрешил отправлять уведомления, то после выполнения кода ниже, ему будет показано уведомление с указанными данными.

var params = {
    body: 'Краткое описание',
    icon: '/path/icon.jpg' // размер например 40x40
};

var notification = new Notification('Заголовок', params);

Уведомление будет показано только текущему пользователю, у которого выполнился код выше.

При повторном выполнение кода, появится второе уведомление, поверх текущего. Чтобы уведомление заменяло текущее, можно использовать параметр tag.

var params = {
    body: 'Краткое описание',
    icon: '/path/icon.jpg',
    tag: 'status' // заменит текущее уведомление с таким же тегом
};

var notification = new Notification('Заголовок', params);

Проверить, что уведомления доступны браузером

Проверить, что браузер поддерживает HTML5 Notifications можно через код ниже:

if ("Notification" in window) {
    // выполнение кода для HTML5 Notifications
}

Выполнять код при нажатии на оповещение

По умолчанию, при нажатии на оповещение, ничего не происходит. Выполнять код при нажатии на оповещение можно через метод onclick.

var notification = new Notification('Заголовок', params);

// Выполнять код при нажатии на оповещении
notification.onclick = function() {
    // код
}