Нативные уведомления в браузере — Notification API

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику

См. также: События · Асинхронность · BOM и navigator · Кнопка "Поделиться" · Кнопка с загрузкой в React · Web API в браузере · Web API на практике - примеры кода

---

Задача

Пользователь нажимает кнопку на сайте, после чего браузер показывает системное уведомление. Сценарий работает нативно через возможности браузера и операционной системы, без создания отдельного desktop-приложения.

Базовые шаги:

1. Проверить поддержку API.
2. Запросить разрешение у пользователя.
3. Показать уведомление после разрешения.

---

Плавный старт — что считать "полезным уведомлением"

Уведомление приносит ценность, когда зовёт пользователя к конкретному действию:

• "Отчёт готов";
• "Платёж подтверждён";
• "Новая заявка требует ответа".

Такой формат работает лучше общих сообщений, потому что даёт понятный контекст и следующий шаг.

---

Мини-кейс "до/после"

Подход	Реакция пользователя
До	частые однотипные уведомления, разрешение быстро отключается
После	редкие и точные события, пользователь чаще открывает уведомления

---

Что такое 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');
}

Разрешение хранится в Notification.permission:

Значение	Что означает
default	пользователь ещё не принял решение
granted	показывать уведомления можно
denied	браузер блокирует уведомления для сайта

Запрос разрешения:

const permission = await Notification.requestPermission();

Обычно этот вызов запускают по действию пользователя, например в click, чтобы браузер не заблокировал запрос.

---

Пример с кнопкой и new Notification

HTML:

<button id="notify-btn" type="button">Проверить уведомление</button>
<script src="notify.js"></script>

JavaScript (notify.js):

const button = document.querySelector('#notify-btn');
if (!button) throw new Error('Кнопка #notify-btn не найдена');

button.addEventListener('click', async () => {
  if (!('Notification' in window)) {
    alert('Notification API не поддерживается');
    return;
  }

  let permission = Notification.permission;
  if (permission === 'default') {
    permission = await Notification.requestPermission();
  }

  if (permission !== 'granted') {
    alert('Разрешение на уведомления не выдано');
    return;
  }

  const notification = new Notification('Hey! 👋', {
    body: 'Ваш отчет готов к скачиванию.',
    icon: '/logo.png',
    tag: 'report-ready',
  });

  notification.onclick = () => {
    window.focus();
    location.href = '/reports/latest';
  };
});

---

Поля уведомления в 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:

self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? { title: 'Новое событие' };

  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body ?? 'Откройте приложение, чтобы посмотреть детали',
      icon: '/logo.png',
      data: { url: data.url ?? '/' },
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const target = event.notification.data?.url ?? '/';
  event.waitUntil(clients.openWindow(target));
});

Этот путь сложнее, зато подходит для реальных 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-сценариев

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

---

Краткий итог

1. Нативные уведомления на сайте запускают через Notification API.
2. Перед показом уведомления проверяют поддержку и разрешение пользователя.
3. Базовый рабочий сценарий для открытой вкладки — new Notification(title, options).
4. Фоновые push-уведомления реализуют через Service Worker и showNotification.
5. Надёжный UX строится на уместной частоте уведомлений и fallback внутри интерфейса.

---