Уведомления в JavaScript: push для браузера и телефона

Кратко: JavaScript позволяет отправлять пользователям push‑уведомления прямо в браузер или на телефон без сторонних библиотек. В этой статье вы узнаете, как запросить разрешение, создать простые и продвинутые уведомления, когда использовать Service Worker и Push API, а также лучшие практики безопасности и совместимости.

Мужчина работает за MacBook Pro в кафе

Введение: что такое уведомления в браузере

Уведомления в JavaScript — это способ отправлять пользователю короткие сообщения в режиме реального времени. Их используют для оповещений о новых сообщениях в чате, напоминаний о событиях в календаре, изменениях на сайте или для привлечения внимания, когда пользователь ушёл со страницы.

Ключевые понятия:

Notification API — клиентская часть, которая отображает уведомления, пока страница/контекст может их создавать.
Push API + Service Worker — механизм для получения push‑сообщений от сервера и отображения уведомлений, даже если страница закрыта.

Когда уведомления не работают (быстрое пояснение)

Браузер блокирует уведомления (статус permission = “denied”).
Пользователь в режиме инкогнито в некоторых браузерах автоматически блокирует уведомления.
Отправка push‑уведомлений в фоне требует настроенного Service Worker и подписки через Push API.

Important: всегда уважайте решение пользователя — если разрешение отклонено, не показывайте повторные запросы без ясной причины.

Запрос разрешения на отправку уведомлений

Перед созданием уведомления нужно запросить разрешение у пользователя. Notification.requestPermission() возвращает промис, который разрешается значением ‘granted’, ‘denied’ или ‘default’.

Простой пример запроса разрешения по клику:

const button = document.querySelector('button');
button.addEventListener('click', () => {
  Notification.requestPermission().then(permission => {
    alert(permission);
  });
});

Если вы увидите alert со значением “denied”, значит браузер/пользователь запретили уведомления. В этом случае не стоит бесконечно просить разрешение — предложите объяснение и настройки (UI), как включить уведомления вручную.

Создание простого уведомления

После получения разрешения (‘granted’) можно создавать уведомления через конструктор Notification.

const button = document.querySelector('button');
button.addEventListener('click', () => {
  Notification.requestPermission().then(perm => {
    if (perm === 'granted') {
      new Notification('Пример уведомления');
    }
  });
});

После клика вы увидите системное или браузерное уведомление (в Windows — в правом нижнем углу, на macOS — в правом верхнем углу, на мобильных устройствах — в области уведомлений).

Скриншот уведомления браузера в Google Chrome

Расширенные свойства уведомлений

Конструктор Notification принимает второй аргумент — объект options. В нём можно задать текст, иконку, tag, данные и т. д.

Свойство body

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

new Notification('Пример уведомления', {
  body: 'Это дополнительный текст уведомления'
});

Свойство data

data позволяет хранить произвольные данные в объекте уведомления. Это удобно, если нужно передать контекст в обработчики событий (click/close) или затем отобразить детали в приложении.

button.addEventListener('click', () => {
  Notification.requestPermission().then(perm => {
    if (perm === 'granted') {
      const notification = new Notification('Пример уведомления', {
        body: 'Это дополнительный текст',
        data: { id: 42, url: '/messages/42' }
      });
      alert(notification.data.id);
    }
  });
});

События уведомления (которые можно слушать на объекте Notification):

show — уведомление показано;
click — пользователь кликнул по уведомлению;
close — уведомление закрыто (пользователем или программно);
error — произошла ошибка отображения уведомления.

Пример обработки close:

const notification = new Notification('Пример уведомления', {
  body: 'Это дополнительный текст',
  data: { hello: 'world' }
});

notification.addEventListener('close', e => {
  console.log(e.target.data.hello);
});

Свойство icon

icon — путь к изображению, которое будет отображено в уведомлении. Путь может быть относительным или абсолютным.

new Notification('Пример уведомления', {
  icon: 'logo.png'
});

Скриншот уведомления с иконкой в Google Chrome

Свойство tag

tag даёт уведомлению идентификатор. Уведомления с одинаковым tag конфликтуют: новое уведомление заменит старое. Это удобно для обновляемых статусов (например, индикатор загрузки или счётчик сообщений).

new Notification('Пример уведомления', {
  body: Math.random().toString(),
  icon: 'logo.png',
  tag: 'status-update'
});

Каждый последующий вызов с tag = ‘status-update’ перезапишет предыдущее уведомление.

Пример: уведомление при потере фокуса страницы

Ниже пример, который показывает уведомление, когда пользователь уходит со вкладки, и закрывает уведомление, когда пользователь возвращается. Обратите внимание: событие называется visibilitychange (без дефиса).

let notification;

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    if (Notification.permission === 'granted') {
      notification = new Notification('Вернитесь, пожалуйста', {
        body: 'Не уходите, у нас ещё есть полезная информация',
        tag: 'come-back'
      });
    }
  } else {
    if (notification) notification.close();
  }
});

Такая техника полезна для кратких напоминаний, но не должна превращаться в спам.

Когда нужен Service Worker и Push API

Notification API работает, когда код выполняется в контексте страницы (или другого активного контекста), но если вы хотите отправлять уведомления при закрытой странице (когда пользователь не на вашем сайте), нужен Push API и Service Worker:

Service Worker — фоновый скрипт, который может принимать push‑сообщения от сервера;
Push API — подписка клиента на push‑уведомления и получение push‑событий на уровне Service Worker;
После получения push‑события Service Worker может вызвать self.registration.showNotification() для показа уведомления.

Минимальная схема работы:

Регистрация Service Worker в клиентском коде.
Получение подписки push (push subscription) через serviceWorkerRegistration.pushManager.subscribe().
Отправка этой подписки на ваш сервер (ключи и endpoint).
Сервер отправляет push‑сообщения по endpoint (например, используя Web Push протокол).
Service Worker получает push и вызывает showNotification.

Простой пример регистрации Service Worker и показа уведомления из него:

// main.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(reg => {
    console.log('sw registered', reg);
  });
}

// sw.js (Service Worker)
self.addEventListener('push', event => {
  const data = event.data ? event.data.json() : { title: 'Новое сообщение', body: 'У вас есть новое уведомление' };
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon || '/logo.png',
      data: data.url || '/' ,
      tag: data.tag
    })
  );
});

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

Важно: Push API требует обмена ключами (VAPID) и отправки подписки с сервера. Реализация сервера выходит за рамки этой статьи, но знание о том, что серверная часть обязательна, критично.

Доступность и UX при работе с уведомлениями

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

Безопасность и приватность

Уведомления могут содержать чувствительную информацию. Не отображайте личные данные в уведомлениях без явного согласия.
Для Push API используйте VAPID‑ключи и отправляйте сообщения по защищённому каналу (HTTPS обязательно).
Уведомления не являются замещением для безопасных каналов связи; не передавайте секреты через тело уведомления.

Privacy / GDPR notes:

Сбор подписки и отправка push‑уведомлений — это обработка персональных данных (endpoint, ip, время). Убедитесь, что у вас есть правовая основа (согласие) и опция отписки.
Храните подписки безопасно и удаляйте подписки при отзыве согласия.

Совместимость браузеров и рекомендации

Notification API поддерживается большинством современных браузеров, но в некоторых мобильных браузерах или приватном режиме возможности могут быть ограничены.
Push API и Service Worker поддерживаются в современных версиях Chrome, Edge, Firefox и некоторых браузерах на Android. Safari на macOS и iOS поддерживает уведомления, но механика и политика могут отличаться.

Краткая совместимость:

Desktop Chrome / Edge / Firefox: поддержка Notification + Service Worker + Push.
Safari: поддержка Notification; для Push API на macOS — отдельные требования (проверьте документацию Safari).
iOS Safari: поддержка уведомлений появилась в новых версиях iOS, но поведение и ограничения отличаются.

Всегда тестируйте на целевых устройствах и версиях браузеров.

Практические рекомендации и шаблоны

Предпросвет: покажите пользователю короткое объяснение, почему нужны уведомления.
Проверка состояния: если Notification.permission === ‘denied’, не вызывайте requestPermission повторно.
Используйте tag для обновляемых уведомлений.
Для фоновых уведомлений настраивайте Service Worker + Push API.
Обрабатывайте клики по уведомлениям, чтобы переводить пользователя в релевантное место в приложении.

Короткий чеклист для разработчика:

Проверить поддержку Notification и Service Worker.
Реализовать UI с объяснением перед запросом permission.
Реализовать fallback: внутри страницы показывать визуальные подсказки, если уведомления недоступны.
Настроить подписание push subscription и передачу на сервер.
Добавить обработчики notificationclick и notificationclose.
Обеспечить корректную политику хранения и удаления подписок (GDPR).

Тесты и критерии приёмки

Критерии приёмки (минимальные):

Запрос разрешения отображается после явного действия пользователя (например, клик по кнопке).
При granted уведомление появляется с указанным title и body.
При клике на уведомление открывается ожидаемая страница.
При одинаковом tag новое уведомление заменяет предыдущее.
Сервисная часть (Push) может принимать push и показывать уведомление через Service Worker.

Тестовые кейсы:

Разрешение = granted: создать уведомление и проверить отображение.
Разрешение = denied: убедиться, что нет повторных запросов и отображается fallback UI.
Проверка tag: два уведомления с одинаковым tag — отображается только последнее.
Service Worker: отправить push с сервера — уведомление показано при закрытой странице.

Альтернативные подходы

Внутренние модальные оповещения: если уведомления недоступны, показывайте на сайте всплывающие элементы (toasts).
Email / SMS: для критичных уведомлений используйте резервные каналы доставки.

Модель принятия решений (Mermaid)

flowchart TD
  A[Нужно уведомление?] --> B{Требуется доставка при закрытой странице?}
  B -- Да --> C[Использовать Push API + Service Worker]
  B -- Нет --> D[Notification API на странице]
  C --> E{Есть серверная часть для push?}
  E -- Да --> F[Реализовать подписку и серверную отправку]
  E -- Нет --> G[Добавить сервер или использовать альтернативы]
  D --> H[Проверить Permission и показать уведомление]

Когда уведомления не подходят (контрпример)

Частые маркетинговые сообщения без персонализации приводят к отпискам и снижению доверия.
Критичные сообщения, требующие безопасности (пароли, одноразовые коды) лучше не отправлять в виде открытого уведомления.

Краткое резюме

Notification API удобен для показа уведомлений, пока страница активна.
Для фоновой доставки необходимы Service Worker и Push API (с серверной частью).
Всегда уважайте пользовательские настройки и требования приватности.
Тестируйте на целевых устройствах и предоставляйте понятный UX перед запросом разрешения.

Дополнительные материалы и ссылки: изучите документацию по Notification API, Service Worker и Push API в официальных источниках MDN и спецификациях W3C.