Настройка 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-уведомлений на вашем сайте обращайтесь к нашим инженерам.