Web Push уведомления: полное внедрение и оптимизация

Техническая интеграция Web Push — задача, которая кажется простой, пока не столкнёшься с нюансами VAPID, истечением подписки или блокировками браузеров. Мы внедряли этот механизм для 30+ проектов: от интернет-магазинов с миллионной аудиторией до стартапов с десятком пользователей. И каждый раз находили неочевидные грабли — например, Safari на iOS до версии 16.4 просто игнорирует push, а Chrome может принудительно удалять подписки без уведомления. В этом материале разберём реальную реализацию: от генерации 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 выигрывает по трём параметрам: дешевле SMS (экономия до $0,02 на сообщение), быстрее Email и персонализируется без потери скорости. Теперь к реализации.

Как сегментация повышает 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. Для этого создаём seeder или слушатель, который при изменении статуса заказа собирает подписки пользователя и отправляет через 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%. Если хотите проверить, как это работает на вашем проекте, пришлите ссылку — мы за один день подготовим оценку. Для консультации свяжитесь с нами.

Для справки: MDN Web Push API — официальная документация.