Настройка 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% пользователей, которые не завершили покупку в течение часа.
| Параметр | Web-push | |
|---|---|---|
| Время доставки | 1–2 сек | 1–10 мин |
| Открываемость | 60–80% | 20–30% |
| Требует разрешения | Да (однократно) | Нет |
| Работает при закрытом браузере | Да (на мобильных) | Нет |
| Спам-фильтры | Нет | Да |
Инфраструктура: 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 дней. Это снижает нагрузку на базу данных и повышает доставляемость.
Поддержка браузеров
| Браузер | Минимальная версия | Особенности |
|---|---|---|
| Chrome | 42 | Полная поддержка |
| Firefox | 44 | Полная поддержка |
| Safari | 16.4 | Требуется macOS 13+ |
| Edge | 17 | Полная поддержка |
| Opera | 29 | Полная поддержка |
Что входит в настройку web-push уведомлений под ключ
- Установка и настройка VAPID-ключей
- Регистрация Service Worker на корне сайта
- Создание таблицы подписок и скрипта сохранения
- Интеграция с событиями: брошенные корзины, смена статуса заказа, массовые рассылки
- Обработка протухших подписок (агент очистки)
- Тестирование на всех поддерживаемых браузерах
- Документация по расширению функционала
- Анализ текущей схемы уведомлений клиента и рекомендации
Свяжитесь с нами для консультации — оценим ваш проект и предложим оптимальное решение. Закажите настройку web-push уведомлений под ключ и получите рабочий прототип уже через 3–5 дней. Для оперативного тестирования push-уведомлений на вашем сайте обращайтесь к нашим инженерам.