Web Push уведомления

1. Поток за минуту

1. Запросите permission после понятного действия пользователя.
2. Подпишитесь через PushManager + публичный VAPID-ключ.
3. Отправьте subscription JSON на бэкенд.
4. Сервер шлёт push, подписанный VAPID.
5. Service Worker ловит push и показывает уведомление.

2. Пример подписки

const permission = await Notification.requestPermission();
if (permission !== 'granted') return;

const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY),
});
await fetch('/api/push/subscribe', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(sub),
});

3. Обработчик push в SW

self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : {};
  event.waitUntil(self.registration.showNotification(data.title || 'Update', {
    body: data.body || '',
    icon: '/icons/icon-192.png',
    data: { url: data.url || '/' },
  }));
});

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

4. Chrome vs iOS Safari

5. Практические правила

• Не спрашивайте push на первом экране.
• Объясните пользу до системного диалога.
• Храните подписки по устройствам и обрабатывайте истечение.
• Держите payload коротким; детали открывайте по URL.