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 — швидкий і залучаючий канал, але вимагає такту: питайте вчасно, пояснюйте вигоду, сегментуйте й тримайте розумну частоту. Тоді сповіщення допомагають, а не дратують. Підібрати тариф із потрібними каналами можна на сторінці тарифів.