Notifications API и обработка разрешений

Notification.permission — это статическая строка, отражающая текущее состояние разрешения. Она может иметь значение "granted" (пользователь разрешил), "denied" (пользователь заблокировал) или "default" (запрос ещё не отправлялся). Проверяйте это свойство перед попыткой показать уведомления, чтобы избежать ненужных ошибок.

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

Наиболее эффективный подход — показать внутри приложения сообщение с объяснением пользы функции, а затем предложить пользователю нажать «Включить уведомления» перед вызовом requestPermission(). Это даёт пользователю необходимый контекст, повышает вероятность согласия и не позволяет браузеру пометить сайт как источник нежелательных сообщений. Никогда не запрашивайте разрешение при загрузке страницы.

new Notification(title, options) создаёт и отображает системное уведомление. Первый аргумент — строка с заголовком. Объект options является вторым аргументом и принимает такие свойства, как body (текст подзаголовка), icon (URL изображения) и tag для устранения дубликатов. Это работает только при наличии разрешения "granted".

К основным параметрам уведомления относятся: body для описательного текста под заголовком, icon для небольшого изображения, badge для небольшого монохромного значка в области уведомлений OS, image для крупного встроенного изображения, tag для замены предыдущего уведомления с тем же тегом и requireInteraction: true, чтобы уведомление оставалось на экране, пока пользователь не выполнит действие.

Экземпляр Notification вызывает несколько событий: onclick — при нажатии пользователя на уведомление (используйте его, чтобы активировать окно и выполнить переход), onclose — при закрытии уведомления и onerror — если при его создании возникла проблема. Добавляйте обработчики в возвращённый экземпляр после вызова new Notification().

Сохраните возвращённый экземпляр Notification в переменной и вызовите notification.close(), чтобы программно закрыть уведомление. Это полезно для уведомлений, актуальных лишь ограниченное время. Объедините этот вызов с setTimeout, чтобы автоматически закрыть уведомление через несколько секунд.

API уведомлений требует защищённого контекста. На страницах HTTP значение typeof Notification === 'undefined' или API полностью отключено — в зависимости от браузера. Это мера безопасности, предотвращающая заполнение устройств пользователей поддельными системными сообщениями со стороны вредоносных сайтов. Перед использованием всегда проверяйте доступность API.

Хук useNotifications может предоставлять два метода: requestPermission() и showNotification(title, options). Он самостоятельно отслеживает текущее состояние разрешения и обновляет его после запроса. Компоненты вызывают showNotification, не заботясь о проверке разрешения, поскольку хук выполняет её внутри себя.

API видимости страницы предоставляет document.hidden и событие visibilitychange. Уведомления наиболее уместны, когда пользователь не просматривает вкладку. Проверяйте document.hidden === true перед показом уведомления, чтобы не создавать лишние оповещения, когда страница уже находится на переднем плане.

Показанный здесь API уведомлений предназначен для локальных уведомлений, инициируемых самой страницей. Для push-уведомлений, которые приходят даже при закрытой странице, необходимы Push API и сервис-воркер. Сервис-воркер получает событие push и в фоновом режиме вызывает self.registration.showNotification().

Какое из следующих значений NOT является допустимым для Notification.permission?

Notification.permission может иметь значение granted, denied или default. Всегда запрашивайте разрешение после действия пользователя, а не при загрузке страницы. Используйте new Notification(title, options) для создания уведомлений и обрабатывайте onclick, чтобы активировать окно. Объединяйте это с API видимости страницы, чтобы показывать уведомления только при скрытой вкладке.