Источник: Nuances of Programming
API уведомлений позволяет отображать всплывающие окна как нативные уведомления на рабочем столе или на экране мобильного телефона. Функциональность варьируется от платформы к платформе, но, как правило, обеспечивает асинхронное предоставление информации пользователю.
Создание нового уведомления
Новые уведомления создаются с помощью конструктора Notification. Он принимает 2 аргумента: первый — это заголовок, второй (необязательный) — это объект с различными свойствами:
- dir: место отображения уведомления. По умолчанию auto, но могут использоваться rtl для расположения справа и ltr для расположения слева.
- lang: строковое значение для языка — языковые тэги BCP 47.
- badge: строка, содержащая URL изображения, использованного для представления уведомления, если на экране для него недостаточно места.
- body: строка с текстом уведомления.
- tag: строка с тэгом-идентификатором уведомления.
- icon: URL-строка с URL значка.
- image: URL-строка для отображаемой картинки.
- data: данные, которые мы хотим связать с уведомлением.
- vibrate: настройки вибрации для устройств с поддержкой этой функции.
- renotify: логическое значение, определяющее, следует ли уведомлять пользователя после того, как новое уведомление заменит старое. По умолчанию значение false.
- requireInteraction: отображает, должно ли уведомление оставаться активным, пока пользователь не кликнет на него или не отклонит его. По умолчанию значение false.
- actions: массив NotificationAction, содержащий действия, доступные пользователю при отображении уведомления. Это объект со свойствами name, title и icon.
Простое уведомление выглядит следующим образом:
Notification нужно настроить так, чтобы уведомления всегда отображались в браузере, тогда мы сможем увидеть созданное уведомление. Мы увидим текст и значок, заданный в свойстве icon.
Методы объекта Notification
Запрос разрешения
Мы можем запросить разрешение статичным методом requestPermission. Он возвращает промис, который решает, разрешен ли показ уведомления. Решение принимается с объектом, имеющим данные разрешения.
При запуске этого метода браузер спросит разрешения на отображение уведомлений для домена.
Например:
Если получено разрешение, console.log в блоке try запишет granted. В обратном случае он запишет denied из console.log в блоке catch.
Закрытие уведомления программным путем
Мы можем закрыть уведомление программным методом close — методом экземпляра объекта Notification.
Например:
В примере выше мы вызвали close внутри обратного вызова метода setTimeout. Уведомление закроется автоматически через 5 секунд.
Обработчики событий
У объектов Notification также есть собственные обработчики событий: onclick, onclose, onerror и onshow. Им можно назначать собственные функции.
onclick
Мы можем назначить обработчик событий свойству onclick, если хотим сделать что-то при нажатии на уведомление. Например:
При нажатии на уведомление во вкладке браузера будет показано предупреждение. Этот обработчик событий принимает один параметр — объект события.
Поведение по умолчанию заключается в перемещении фокуса в область просмотра контекста, связанного с уведомлением. Чтобы предотвратить это, вызовем preventDefault() в передаваемом параметре event:
Назначив функцию обработчика событий свойству onclose, можно заставить уведомление делать что-то, когда оно закрыто.
То же самое можно сделать для свойства onerror для обработки ошибок и для свойства onshow для обработки события show, которое выполняется при отображении уведомления.
Вывод
Notification API — действительно простой способ отображения нативных уведомлений веб-приложений. Разрешение на отображение уведомлений запрашивается статичным методом Notification.requestPermission. Как только промис разрешается, если пользователь принимает отображение уведомлений, мы просто создаем объект Notification с необходимыми настройками. Готово, уведомления будут отображаться.
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи John Au-Yeung: Use the JavaScript Notification API to Display Native Popups