Web push уведомления: как настроить и не раздражать

Что такое web push и как он работает

Web push уведомления — это короткие сообщения от сайта, которые приходят в браузер даже когда вкладка закрыта. Пользователь один раз разрешает уведомления, браузер выдаёт подписку с endpoint и ключами, а сервер шлёт сообщения через push-сервис по протоколу с VAPID-подписью. Главное правило — спрашивать разрешение уместно и не заваливать человека.

Opt-in UX: как правильно спрашивать

Нативный запрос браузера в лоб на первой секунде почти всегда получает «Блокировать». Работает двухшаговый паттерн: сначала своя мягкая подсказка с объяснением выгоды, и только после согласия — системный запрос.

• Не сразу. Покажите запрос после первого полезного действия, а не на входе.
• Объясните зачем. «Присылать уведомление о снижении цены?» лучше, чем немой prompt.
• Уважайте отказ. Отклонил — не показывайте снова неделями.
• Контекст. Просите на странице товара, а не на главной.

VAPID-ключи

VAPID (Voluntary Application Server Identification) идентифицирует ваш сервер перед push-сервисом. Нужна пара ключей: публичный отдаётся браузеру при подписке, приватный хранится на сервере и подписывает запросы.

# Генерация пары VAPID-ключей
npx web-push generate-vapid-keys

Public Key:  BQ8...prqZk
Private Key: 3Kf...9dQ
Subject:     mailto:push@yourtrend.online

Публичный ключ передаётся при оформлении подписки в браузере:

registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: 'BQ8...prqZk'
});

Частота: как не раздражать

Push раздражает быстрее email, потому что появляется поверх всего. Рекомендации по частоте:

Обязательно давайте настройку тихих часов и лёгкую отписку. Ночной push — прямой путь к отключению.

Сегментация web push

Как и в email, шлите не всем. Сегментируйте по просмотренным категориям, городу, языку и поведению. Брошенная корзина, снижение цены на избранное, возврат товара в наличие — точечные сценарии кликаются кратно лучше массовых. В YourTrend web push живёт рядом с email, SMS, сегментами и автоматизациями, поэтому канал выбирается под аудиторию — обзор на странице возможностей.

Полезные сценарии

1. Брошенная корзина через 1–2 часа.
2. Снижение цены на товар из избранного.
3. Снова в наличии для ожидавших.
4. Статус заказа: отправлен, доставлен.
5. Контент: новая статья по интересующей теме.

Как выглядит отправка и приём

Сервер шлёт зашифрованное сообщение на endpoint подписки, а service worker в браузере ловит событие push и показывает уведомление даже при закрытой вкладке. Полезная нагрузка — короткий JSON:

{
  "title": "Цена снизилась на 20%",
  "body": "Кроссовки из избранного теперь дешевле",
  "icon": "/icons/push-192.png",
  "url": "/catalog/sneakers/42"
}

// service-worker.js
self.addEventListener('push', function(event) {
  const d = event.data.json();
  event.waitUntil(
    self.registration.showNotification(d.title, {
      body: d.body, icon: d.icon, data: { url: d.url }
    })
  );
});

По клику ведите пользователя не на главную, а на конкретный товар из поля url — это заметно повышает конверсию.

Поддержка браузеров и iOS

Web push работает в Chrome, Firefox, Edge и Opera на десктопе и Android. Ключевая оговорка — Safari: на iPhone и iPad push приходит только если пользователь добавил сайт на домашний экран как PWA (доступно с iOS 16.4+). Поэтому web push отлично дополняет, но не заменяет email: у части аудитории его технически не будет. Комбинируйте каналы — email, SMS и push — под каждый сегмент.

Частые ошибки

• Запрос разрешения на первой секунде без контекста.
• Только промо, ноль полезных уведомлений.
• Нет сегментации — одинаковый push всем.
• Нет тихих часов и понятной отписки.
• Ссылка ведёт на главную, а не на конкретный товар.

Вывод

Web push — быстрый и вовлекающий канал, но требует такта: спрашивайте вовремя, объясняйте выгоду, сегментируйте и держите разумную частоту. Тогда уведомления помогают, а не бесят. Подобрать тариф с нужными каналами можно на странице тарифов.