Налаштування web-push сповіщень на сайті 1С-Бітрікс

Налаштування web-push сповіщень на сайті 1С-Бітрікс

Користувач залишає сайт, не завершивши замовлення. Звичайний лист-нагадування губиться в пошті. А push-сповіщення приходить навіть при закритому браузері на мобільному пристрої. Реалізувати це на Бітріксі не тривіально: потрібен VAPID, Service Worker, коректна обробка прострочених підписок та інтеграція з CRM-подіями. Ми розбираємо технічні деталі, які використовуємо в кожному проекті. Наш досвід — понад 5 років роботи з Бітрікс та 20+ проектів з push-сповіщеннями. В одному з проектів (інтернет-магазин з 50 000 товарів) ми збільшили повернення занедбаних кошиків на 25% за рахунок push-сповіщень, налаштованих за описаною нижче схемою.

Переваги web-push сповіщень перед email

Push-сповіщення мають ряд переваг: вони не фільтруються спам-фільтрами, доставляються миттєво і видні навіть при закритому браузері (на мобільних пристроях). На відміну від email, де відкриваність листів у середньому 20–30%, у push-сповіщень вона сягає 60–80%. За відкриваністю push-сповіщення кращі за email у 3 рази (60–80% проти 20–30%), згідно зі специфікацією Web Push Protocol. Особливо ефективні push для занедбаних кошиків — повернення користувачів збільшується на 20–30%. На одному з проектів ми зафіксували повернення 25% користувачів, які не завершили покупку протягом години.

Інфраструктура: VAPID-ключі та Service Worker

Для Web Push потрібні VAPID-ключі — пара публічний/приватний ключ для аутентифікації сервера перед браузерним push-сервісом. Генеруються один раз. Встановіть бібліотеку через composer require minishlink/web-push, потім:

use Minishlink\WebPush\VAPID; $keys = VAPID::createVapidKeys(); // ['publicKey' => '...', 'privateKey' => '...'] // Зберігаємо в налаштування COption::SetOptionString('local', 'vapid_public_key', $keys['publicKey']); COption::SetOptionString('local', 'vapid_private_key', $keys['privateKey']); 

Публічний ключ передається браузеру при реєстрації підписки, приватний зберігається на сервері. Service Worker — це JS-файл, що реєструється браузером для фонової роботи. Файл service-worker.js має розташовуватись в корені сайту (/service-worker.js) — це обмеження браузерного scope.

Як підписати користувача правильно?

На стороні браузера запитуєте дозвіл та створюєте підписку. Service Worker обробляє вхідні push-події та кліки по сповіщенню:

// service-worker.js self.addEventListener('push', function(event) { const data = event.data.json(); event.waitUntil( self.registration.showNotification(data.title, { body: data.body, icon: data.icon || '/local/images/push-icon.png', data: { url: data.url } }) ); }); self.addEventListener('notificationclick', function(event) { event.notification.close(); event.waitUntil(clients.openWindow(event.notification.data.url)); }); // Підписка в основному скрипті async function subscribeToPush() { const registration = await navigator.serviceWorker.register('/service-worker.js'); const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array('YOUR_VAPID_PUBLIC_KEY') }); await fetch('/local/ajax/push_subscribe.php', { method: 'POST', body: JSON.stringify(subscription), headers: { 'Content-Type': 'application/json' } }); } 

На сервері в /local/ajax/push_subscribe.php зберігаєте підписку. Таблиця підписок містить поля ID, USER_ID (NULL для неавторизованих), ENDPOINT, P256DH, AUTH, CREATED_AT, LAST_ACTIVE. Унікальний індекс на ENDPOINT.

Відправка сповіщень з Бітрікса

Сервісний клас відправки через бібліотеку minishlink/web-push:

use Minishlink\WebPush\WebPush; use Minishlink\WebPush\Subscription; function sendPushNotification(array $subscription, string $title, string $body, string $url): void { $auth = [ 'VAPID' => [ 'subject' => 'https://example.com', 'publicKey' => COption::GetOptionString('local', 'vapid_public_key'), 'privateKey' => COption::GetOptionString('local', 'vapid_private_key'), ], ]; $webPush = new WebPush($auth); $webPush->queueNotification( Subscription::create([ 'endpoint' => $subscription['ENDPOINT'], 'keys' => ['p256dh' => $subscription['P256DH'], 'auth' => $subscription['AUTH']], ]), json_encode(['title' => $title, 'body' => $body, 'url' => $url]) ); foreach ($webPush->flush() as $report) { if ($report->isSubscriptionExpired()) { deleteExpiredSubscription($report->getEndpoint()); } } } 

Інтеграція з подіями Бітрікса

Нагадування про занедбаний кошик. Агент раз на годину знаходить кошики з товарами старше 2 годин у користувачів з підпискою та відправляє push. Таблиця b_sale_basket, фільтр по DATE_UPDATE < NOW() - INTERVAL 2 HOUR та ORDER_ID IS NULL.

Сповіщення про зміну статусу замовлення. Обробник OnSaleOrderStatusUpdate:

AddEventHandler("sale", "OnSaleOrderStatusUpdate", function($orderId, $arFields) { if ($arFields['STATUS_ID'] === 'D') { // Delivered $userId = CSaleOrder::GetByID($orderId)['USER_ID']; sendPushToUser($userId, 'Замовлення доставлено', 'Ваше замовлення #' . $orderId . ' чекає на вас'); } }); 

Масові розсилки. Вибираєте всіх підписників з b_local_push_subscription, відправляєте батчами по 100 через webPush->queueNotification() + flush(). Великі розсилки — через агент з посторінковою обробкою, щоб не вичерпати ліміт часу виконання скрипта.

Як обробляти прострочені підписки?

Прострочені підписки (endpoint повернув 404 або 410) видаляйте одразу — вони накопичуються швидко та сповільнюють розсилки. Рекомендується додати агент для періодичного очищення: наприклад, раз на добу перевіряти всі підписки та видаляти ті, які не оновлювались понад 30 днів. Це знижує навантаження на базу даних та підвищує доставлюваність.

Підтримка браузерів

Що входить у налаштування web-push сповіщень під ключ

• Встановлення та налаштування VAPID-ключів
• Реєстрація Service Worker в корені сайту
• Створення таблиці підписок та скрипта збереження
• Інтеграція з подіями: занедбані кошики, зміна статусу замовлення, масові розсилки
• Обробка прострочених підписок (агент очищення)
• Тестування на всіх підтримуваних браузерах
• Документація щодо розширення функціоналу
• Аналіз поточної схеми сповіщень клієнта та рекомендації

Зв'яжіться з нами для консультації — оцінимо ваш проект та запропонуємо оптимальне рішення. Замовте налаштування web-push сповіщень під ключ та отримайте робочий прототип вже через 3–5 днів. Для оперативного тестування push-сповіщень на вашому сайті звертайтесь до наших інженерів.