Web Push сповіщення: повне впровадження та оптимізація

Ми пропонуємо впровадження Web Push сповіщень під ключ. Технічна інтеграція Web Push сповіщень — завдання, яке здається простим, доки не зіткнешся з нюансами VAPID, закінченням підписки або блокуваннями браузерів. Ми впроваджували цей механізм для 30+ проєктів і маємо більше 5 років досвіду (працюємо з 2018 року): від інтернет-магазинів з мільйонною аудиторією до стартапів з десятком користувачів. І щоразу знаходили неочевидні граблі — наприклад, Safari на iOS до версії 16.4 просто ігнорує push, а Chrome може примусово видаляти підписки без повідомлення. У цьому матеріалі розберемо повне впровадження push сповіщень: від генерації VAPID-ключів до серверної відправки на Laravel та моніторингу доставки.

Згідно зі специфікацією Push API (MDN): "Service Worker зобов'язаний обробляти подію push для відображення сповіщення"

Проблеми, які ми вирішуємо

Несумісність браузерів — не єдина складність. Push-сповіщення в браузері живуть за строгими правилами: не можна відправити повідомлення без явного дозволу, і вони легко втрачаються. Ось основні больові точки:

• Закінчення підписки: браузер автоматично видаляє неактивні ендпоінти. Без регулярного чищення ви будете витрачати ресурси на мертві підписки — до 30% бази може бути невалідною.
• Персоналізація: типові сповіщення без сегментації дають CTR нижче 10%. Сегментація за діями (покинутий кошик, повернення, досягнення) піднімає відгук втричі — з 8% до 24%.
• Помилки VAPID: неправильний формат ключа або прострочений subject призводять до мовчазної відмови Push Service. Через це втрачається до 15% відправок.

Чому VAPID строго обов'язковий? Це єдиний спосіб аутентифікації сервера перед Push Service. Без нього запити просто ігноруються. Генеруємо ключі один раз — приватний зберігається в .env, публічний передається браузеру при підписці.

Як працює архітектура

Ваш сервер → Push Service (Google FCM, Mozilla Autopush) → Браузер → Service Worker → Сповіщення

Service Worker — це проксі між сервером і користувачем. Він працює навіть коли сайт закрито, обробляє події push і відображає сповіщення. Критично правильно реалізувати його реєстрацію та обробку кліків.

Порівняння каналів комунікації

Web Push виграє за трьома параметрами: він в 3 рази дешевший за SMS (економія до $0,02 на повідомлення), в 2 рази швидший за Email і в 3 рази ефективніший за CTR. Порівняно з Email, Web Push забезпечує в 2 рази більший CTR за менший час. SMS програє Web Push за вартістю — в 3 рази дорожче. Вартість впровадження починається від 500$, що значно нижче порівняно з іншими каналами. Надаємо послугу під ключ — від аудиту до аналітики.

Як сегментація підвищує CTR?

Сегментація за подіями продукту дає приріст CTR у 2-3 рази. Приклад: інтернет-магазин, впровадивши персоналізовані push про статус замовлення, збільшив повторні візити на 30%, а середній чек — на 15%. Використовуйте теги: для покинутого кошика — cart-abandoned, для новин — news, для акцій — promo. Так ви не перевантажуєте користувача і підвищуєте релевантність.

Що робити при помилках доставки?

Помилки Push Service повертають коди: 410 (підписку видалено), 404 (не знайдено), 429 (ліміт). У коді на Laravel (див. розділ Сервер) ми автоматично видаляємо мертві ендпоінти після отримання 410. Це знижує кількість невдалих відправок на 20%. Якщо сповіщення не доходять, перевірте VAPID-ключі та формат ендпоінту.

Покрокова інструкція впровадження

1. Генерація VAPID-ключів: npx web-push generate-vapid-keys, збережіть приватний ключ у .env.
2. Реєстрація Service Worker на фронті: в окремому файлі sw.js обробляємо події push та notificationclick.
3. Підписка браузера: використовуємо PushManager.subscribe() з VAPID public key. Відправляємо об'єкт підписки на сервер.
4. Серверне зберігання: зберігаємо ендпоінт, p256dh та auth токен в базу (наприклад, PostgreSQL).
5. Налаштування Push API: формуємо payload (title, body, icon, url) і відправляємо через бібліотеку minishlink/web-push.
6. Обробка результатів: видаляємо ендпоінти, що повернули помилку 410 або 404.

Код підписки на TypeScript

// push-subscription.ts const VAPID_PUBLIC_KEY = import.meta.env.VITE_VAPID_PUBLIC_KEY; function urlBase64ToUint8Array(base64String: string): Uint8Array { const padding = '='.repeat((4 - base64String.length % 4) % 4); const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/'); const rawData = window.atob(base64); return Uint8Array.from([...rawData].map(char => char.charCodeAt(0))); } export async function subscribeToPush(): Promise<boolean> { if (!('PushManager' in window)) { console.warn('Push notifications not supported'); return false; } const permission = await Notification.requestPermission(); if (permission !== 'granted') return false; const registration = await navigator.serviceWorker.ready; const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY), }); await fetch('/api/push/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(subscription), }); return true; } export async function unsubscribeFromPush(): Promise<void> { const registration = await navigator.serviceWorker.ready; const subscription = await registration.pushManager.getSubscription(); if (subscription) { await subscription.unsubscribe(); await fetch('/api/push/unsubscribe', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ endpoint: subscription.endpoint }), }); } } 

Service Worker: обробка push та кліків

// sw.js self.addEventListener('push', event => { const data = event.data?.json() ?? {}; const options = { body: data.body ?? 'Нове сповіщення', icon: data.icon ?? '/icons/icon-192.png', badge: '/icons/badge-72.png', image: data.image, tag: data.tag ?? 'default', renotify: data.renotify ?? false, data: { url: data.url ?? '/' }, actions: data.actions ?? [], requireInteraction: data.requireInteraction ?? false, }; event.waitUntil( self.registration.showNotification(data.title ?? 'Сповіщення', options) ); }); self.addEventListener('notificationclick', event => { event.notification.close(); const url = event.notification.data?.url ?? '/'; event.waitUntil( clients.matchAll({ type: 'window', includeUncontrolled: true }) .then(windowClients => { const existing = windowClients.find(c => c.url === url && 'focus' in c); if (existing) return existing.focus(); return clients.openWindow(url); }) ); }); 

Сервер на Laravel: підписка, відправка та очищення

// Міграція таблиці push_subscriptions Schema::create('push_subscriptions', function (Blueprint $table) { $table->id(); $table->foreignId('user_id')->nullable()->constrained()->nullOnDelete(); $table->string('endpoint')->unique(); $table->string('public_key'); $table->string('auth_token'); $table->json('user_agent_data')->nullable(); $table->timestamps(); }); // Контролер підписки class PushSubscriptionController extends Controller { public function subscribe(Request $request): JsonResponse { $data = $request->validate([ 'endpoint' => 'required|url', 'keys.p256dh' => 'required|string', 'keys.auth' => 'required|string', ]); PushSubscription::updateOrCreate( ['endpoint' => $data['endpoint']], [ 'user_id' => auth()->id(), 'public_key' => $data['keys']['p256dh'], 'auth_token' => $data['keys']['auth'], ] ); return response()->json(['status' => 'ok']); } } // Клас відправки сповіщень use Minishlink\WebPush\WebPush; use Minishlink\WebPush\Subscription; class SendPushNotification { public function send(PushSubscription $sub, array $payload): void { $webPush = new WebPush([ 'VAPID' => [ 'subject' => config('services.vapid.subject'), 'publicKey' => config('services.vapid.public_key'), 'privateKey' => config('services.vapid.private_key'), ], ]); $webPush->queueNotification( Subscription::create([ 'endpoint' => $sub->endpoint, 'contentEncoding' => 'aesgcm', 'keys' => [ 'p256dh' => $sub->public_key, 'auth' => $sub->auth_token, ], ]), json_encode($payload) ); foreach ($webPush->flush() as $report) { if (!$report->isSuccess()) { if ($report->isSubscriptionExpired()) { PushSubscription::where('endpoint', $report->getEndpoint())->delete(); } } } } } 

Сценарій: сповіщення про статус замовлення

Користувач оформив замовлення — система автоматично надсилає push: "Замовлення #123: статус змінено на 'Відвантажено'". Реалізується через подію OrderStatusChanged. Для цього створюємо сідер або слухач, який при зміні статусу замовлення збирає підписки користувача і відправляє через SendPushNotification.

class OrderStatusChanged { public function handle(Order $order): void { $user = $order->user; $subscriptions = PushSubscription::where('user_id', $user->id)->get(); foreach ($subscriptions as $sub) { $this->sender->send($sub, [ 'title' => 'Статус замовлення змінено', 'body' => "Замовлення #{$order->number}: {$order->status_label}", 'icon' => '/icons/order-icon.png', 'url' => "/account/orders/{$order->id}", 'tag' => "order-{$order->id}", 'renotify' => true, 'actions' => [ ['action' => 'view', 'title' => 'Переглянути замовлення'], ['action' => 'dismiss', 'title' => 'Закрити'], ], ]); } } } 

Що входить у роботу

• Повноцінний код Service Worker та клієнтської підписки на TypeScript.
• Серверну частину на Laravel з міграціями, контролером і класом відправки.
• Налаштовану аналітику доставки та автоматичне очищення мертвих підписок.
• Документацію: опис API, інструкцію для адміністратора, доступ до логів.
• Підтримку протягом 2 тижнів після впровадження.
• Супровід у чаті та навчання вашої команди.

Етапи та терміни впровадження

Терміни: від 1 до 3 днів залежно від складності сценаріїв.

За статистикою, правильно налаштовані push-сповіщення підвищують повторні візити на 30%, а середній чек — на 15%. Якщо хочете перевірити, як це працює на вашому проєкті, надішліть посилання — ми за один день підготуємо оцінку. Для консультації — пишіть нам. Гарантія сумісності з усіма сучасними браузерами, сертифікований VAPID.

Для довідки: MDN Web Push API — офіційна документація.