Нативные уведомления в браузере — Notification API
См. также: События · Асинхронность · BOM и navigator · Кнопка "Поделиться" · Кнопка с загрузкой в React · Canvas 2D · Web API в браузере · Web API на практике - примеры кода
Задача
Пользователь нажимает кнопку на сайте, после чего браузер показывает системное уведомление. Сценарий работает нативно через возможности браузера и операционной системы, без создания отдельного desktop-приложения.
Базовые шаги:
- Проверить поддержку API.
- Запросить разрешение у пользователя.
- Показать уведомление после разрешения.
Критерии полезного push-уведомления
Уведомление оправдано, если ведёт к конкретному действию с понятным контекстом — "отчёт готов", "платёж подтверждён", "новая заявка ждёт ответа". Редкие точные события удерживают разрешение; частые однотипные сообщения пользователь отключает.
Что такое Notification API
Notification API позволяет странице показывать системные уведомления, похожие на уведомления от мессенджеров и почты.
У API два основных сценария:
| Сценарий | Метод |
|---|---|
| Страница открыта, пользователь кликнул кнопку | new Notification(title, options) |
| Фоновые уведомления через Service Worker | registration.showNotification(title, options) |
Для учебного старта чаще используют new Notification(...) из обработчика клика.
Проверка поддержки и разрешения
Перед запуском проверяют, существует ли глобальный объект Notification:
if (!('Notification' in window)) {
alert('Этот браузер не поддерживает Notification API');
}
Разбор:
- В этом фрагменте используется конструкция
if (!('Notification' in window)) {как точка входа сценария. - Код показывает последовательность действий: получение данных, проверка условий и выполнение целевого действия.
- Ключевые вызовы и свойства опираются на стандартные API JavaScript/браузера, поэтому шаблон легко перенести в реальный проект.
- Такой пример удобно расширять обработкой ошибок, логированием и дополнительной валидацией входных данных.
Разрешение хранится в Notification.permission:
| Значение | Что означает |
|---|---|
default | пользователь ещё не принял решение |
granted | показывать уведомления можно |
denied | браузер блокирует уведомления для сайта |
Запрос разрешения:
const permission = await Notification.requestPermission();
Разбор:
- В этом фрагменте используется конструкция
const permission = await Notification.requestPermission();как точка входа сценария. - Код показывает последовательность действий: получение данных, проверка условий и выполнение целевого действия.
- Используется асинхронное выполнение (
async/await), поэтому интерфейс остаётся отзывчивым, пока операция не завершится. - Ключевые вызовы и свойства опираются на стандартные API JavaScript/браузера, поэтому шаблон легко перенести в реальный проект.
- Такой пример удобно расширять обработкой ошибок, логированием и дополнительной валидацией входных данных.
Обычно этот вызов запускают по действию пользователя, например в click, чтобы браузер не заблокировал запрос.
Пример с кнопкой и new Notification
HTML:
<button id="notify-btn" type="button">Проверить уведомление</button>
<script src="notify.js"></script>
Разбор:
- В этом фрагменте используется конструкция
<button id="notify-btn" type="button">Проверить уведомление</button>как точка входа сценария. - Разметка задаёт опорные элементы интерфейса, к которым затем подключается JavaScript-логика.
- Ключевые вызовы и свойства опираются на стандартные API JavaScript/браузера, поэтому шаблон легко перенести в реальный проект.
- Такой пример удобно расширять обработкой ошибок, логированием и дополнительной валидацией входных данных.
JavaScript (notify.js):
Код ITЗагрузка примера кода…
Разбор:
- В этом фрагменте используется конструкция
const button = document.querySelector('#notify-btn');как точка входа сценария. - Код показывает последовательность действий: получение данных, проверка условий и выполнение целевого действия.
- Поиск элементов через
querySelectorявно привязывает сценарий к нужным узлам DOM. - Подписка через
addEventListenerсвязывает поведение с действием пользователя и отделяет логику от HTML-разметки. - Используется асинхронное выполнение (
async/await), поэтому интерфейс остаётся отзывчивым, пока операция не завершится. - Ключевые вызовы и свойства опираются на стандартные API JavaScript/браузера, поэтому шаблон легко перенести в реальный проект.
- Такой пример удобно расширять обработкой ошибок, логированием и дополнительной валидацией входных данных.
Поля уведомления в options
| Поле | Назначение |
|---|---|
body | дополнительный текст |
icon | иконка уведомления |
image | крупное изображение, если поддерживается платформой |
tag | идентификатор для группировки похожих уведомлений |
renotify | повторный сигнал при том же tag |
silent | уведомление без звука |
data | служебные данные для обработки клика |
Платформы показывают эти поля по-разному. Часть опций может игнорироваться на конкретном устройстве.
Ограничения и практические правила
| Правило | Что делать |
|---|---|
| Запрашивать разрешение только в контексте действия пользователя | вызывать requestPermission() внутри click |
| Уведомления доступны в безопасном контексте | использовать https или localhost в разработке |
| Пользователь может отключить уведомления в настройках | проверять Notification.permission перед показом |
| Частые уведомления раздражают | отправлять только полезные события |
| Разный уровень поддержки браузеров | добавлять fallback внутри UI |
Fallback обычно делают через инлайн-сообщение в интерфейсе, toast или копирование ссылки в буфер.
Когда нужен Service Worker
new Notification(...) работает, пока страница активна. Для фоновых сценариев, когда вкладка закрыта или свернута, применяют связку Push API + Service Worker + showNotification(...).
Пример в Service Worker:
Код ITЗагрузка примера кода…
Разбор:
- В этом фрагменте используется конструкция
self.addEventListener('push', (event) => {как точка входа сценария. - Код показывает последовательность действий: получение данных, проверка условий и выполнение целевого действия.
- Подписка через
addEventListenerсвязывает поведение с действием пользователя и отделяет логику от HTML-разметки. - Ключевые вызовы и свойства опираются на стандартные API JavaScript/браузера, поэтому шаблон легко перенести в реальный проект.
- Такой пример удобно расширять обработкой ошибок, логированием и дополнительной валидацией входных данных.
Этот путь сложнее, зато подходит для реальных push-уведомлений от сервера.
Частые ошибки
| Симптом | Причина |
|---|---|
requestPermission всегда возвращает denied | пользователь ранее запретил уведомления |
Уведомление не показывается после new Notification | сайт открыт по http, а не https |
| Код работает в одном браузере и не работает в другом | различия в поддержке опций и политик |
| Пользователь получает много одинаковых уведомлений | нет tag и дедупликации событий |
Политика уведомлений в продукте
Качество уведомлений определяется не только API, но и продуктовой дисциплиной:
- уведомление приходит по событию с ценностью для пользователя;
- частота ограничена правилами дедупликации и quiet-hours;
- каждое уведомление ведёт в конкретный экран действия;
- у пользователя есть настройка отключения отдельных типов событий.
Такой подход удерживает высокий CTR и снижает вероятность полного запрета разрешения на уровне браузера.
Чек-лист внедрения Notification API
| Шаг | Что проверить |
|---|---|
| Проверка возможностей | 'Notification' in window и статус Notification.permission |
| Разрешение | запрос только по действию пользователя |
| Безопасность | запуск через HTTPS и безопасная обработка ссылок в onclick |
| Дедупликация | использование tag для повторяющихся событий |
| Фоновый режим | Service Worker + showNotification для push-сценариев |
Полезно связывать уведомления с потоковыми обновлениями, чтобы интерфейс и системные события показывали согласованное состояние задач.
Краткий итог
- Нативные уведомления на сайте запускают через
Notification API. - Перед показом уведомления проверяют поддержку и разрешение пользователя.
- Базовый рабочий сценарий для открытой вкладки —
new Notification(title, options). - Фоновые push-уведомления реализуют через Service Worker и
showNotification. - Надёжный UX строится на уместной частоте уведомлений и fallback внутри интерфейса.