Web Notifications API

Доступ к механизму веб-оповещений осуществляется через свойство Notification объекта window.

Это конструктор, который позволяет создать экземпляр оповещения. Он принимает два параметра: строку с заголовком оповещения и опциональный объект с настройками.

Перед тем, как создать экземпляр оповещения, давайте взглянем на те настройки, которые мы можем указать:

• body - строка, использующаяся для указания цели уведомления,
• lang - язык оповещения. Значение должно быть совместимо со стандартом BCP 47. Примеры валидного значения: en-US и it-IT,
• dir - направление текста сообщения. Значение может быть auto, что подразумевает, что направление текста будет определяться браузер, ltr указывает, что текст будет идти слева направо (для европейских языков), или rtl - текст справа налево (для некоторых азиатских языков),
• tag - строка, использующаяся как идентификатор, которая служит для получения, замещения или удаления оповещения,
• icon - URL изображения, которое будет использовано в качестве иконки оповещения.

Чтобы создать экземпляр объекта Notification, необходимо использовать подобное выражение:

var notification = new Notification('Получено письмо', {
  body: 'У вас всего 3 непрочитанных письма'
});

Настройки, которые мы только что разбирали, также доступны как свойства для чтения у экземпляра оповещения. В дополнение к ним, объект Notification также предоставляет свойство permission, которое содержит строку, представляющее текущее разрешение на отображение оповещений. Его значение может быть одним из следующих:

• denied - пользователь запретил отображение оповещений,
• granted - пользователь разрешил отображение оповещений,
• default - выбор пользователя неизвестен.

API предоставляет два метода: requestPermission() и close().

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

requestPermission() является методом объекта Notification и опционально принимает функцию обратного вызова, которая выполняется, когда пользователь принимает или отклоняет разрешение. Выбор пользователя передается в функцию обратного вызова параметром, который может принимать значения granted, denied или default.

close() - метод экземпляра, он не принимает параметров.

Иногда необходимо выполнить какое-то действие, как только меняется состояние оповещения.

Например, мы хотим знать, пользователь кликнул по оповещению, или же оно было закрыто. Для того, чтобы это сделать, можно навесить обработчик на одно из четырех возможных событий:

• onclick - вызывается, когда пользователь кликает по оповещению,
• onclose - вызывается, когда пользователь или браузер закрывают оповещение,
• onerror - вызывается, если с оповещением случилась ошибка,
• onshow - вызывается при отображении оповещения.

Простейший пример использования событий показан ниже.

var notification = new Notification('Получено письмо', {
  body: 'У вас всего 3 непрочитанных письма'
});

notification.onshow = function() {
  console.log('Отображено оповещение');
};

Пример работы с оповещениями браузера

Log

Исходный код этого примера:

<style>
    #custom-notification {
        margin-top: 1em;
    }
    label {
        display: block;
    }
    input[name="title"], textarea {
        width: 100%;
    }
    input[name="title"] {
        height: 2em;
    }
    textarea {
        height: 5em;
    }
    .hidden {
        display: none;
    }
    .buttons-wrapper {
        text-align: center;
    }
    .button-demo {
        padding: 0.5em;
        margin: 1em;
    }
    #log {
        height: 200px;
        width: 100%;
        overflow-y: scroll;
        border: 1px solid #333333;
        line-height: 1.3em;
    }
    .author{
        display: block;
        margin-top: 1em;
    }
</style>
<span id="wn-unsupported" class="hidden">API не поддерживается</span>

<form id="custom-notification" action="">
    <label for="title">Заголовок:</label>
    <input type="text" id="title" name="title">

    <label for="body">Тело:</label>
    <textarea id="body" name="body"></textarea>

    <div class="buttons-wrapper">
        <button id="button-wn-show-preset" class="button-demo">Показать оповещение по предопределенным настройкам</button>
        <input type="submit" id="button-wn-show-custom" class="button-demo" value="Показать свое оповещение">
    </div>
</form>

<h3>Log</h3>
<div id="log"></div>
<button id="clear-log" class="button-demo">Очистить лог</button>

<script>
    if (!('Notification' in window)) {
        document.getElementById('wn-unsupported').classList.remove('hidden');
        document.getElementById('button-wn-show-preset').setAttribute('disabled', 'disabled');
        document.getElementById('button-wn-show-custom').setAttribute('disabled', 'disabled');
    } else {
        var log = document.getElementById('log');
        var notificationEvents = ['onclick', 'onshow', 'onerror', 'onclose'];

        function notifyUser(event) {
            var title;
            var options;

            event.preventDefault();

            if (event.target.id === 'button-wn-show-preset') {
                title = 'Получено письмо';
                options = {
                    body: 'У вас 3 непрочитанных сообщения',
                    tag: 'preset',
                    icon: 'http://www.audero.it/favicon.ico'
                };
            } else {
                title = document.getElementById('title').value;
                options = {
                    body: document.getElementById('body').value,
                    tag: 'custom'
                };
            }

            Notification.requestPermission(function() {
                var notification = new Notification(title, options);

                notificationEvents.forEach(function(eventName) {
                    notification[eventName] = function(event) {
                        log.innerHTML = 'Событие "' + event.type + '" выброшено для оповещения "' + notification.tag + '"<br />' + log.innerHTML;
                    };
                });
            });
        }

        document.getElementById('button-wn-show-preset').addEventListener('click', notifyUser);
        document.getElementById('button-wn-show-custom').addEventListener('click', notifyUser);
        document.getElementById('clear-log').addEventListener('click', function() {
            log.innerHTML = '';
        });
    }
</script>