Как работают веб-push-уведомления изнутри
Вы видите уведомления о новых сообщениях, обновлениях заказов или напоминаниях об оплате.
Это кажется простым. Ваш бэкенд отправляет сообщение, и пользователь его получает.
На самом деле процесс включает в себя множество компонентов. Ваш бэкенд никогда не взаимодействует с браузером напрямую. Вместо этого он использует Push-сервис.
Google Chrome использует Firebase Cloud Messaging. Firefox использует Mozilla Push Service.
Рабочий процесс выглядит так:
Бэкенд → Push-сервис → Браузер → Service Worker → Пользователь
Вот как построить такую систему с использованием React и Golang.
Компоненты
- Frontend (React): запрашивает разрешение и регистрирует Service Worker.
- Service Worker: фоновый скрипт, который работает в браузере. Он обрабатывает события, даже когда ваш сайт закрыт.
- Backend (Golang): хранит подписки и отправляет зашифрованные сообщения.
- Push-сервис: посредник, который доставляет сообщение в браузер.
Процесс подписки
Чтобы отправить сообщение, вам нужна подписка.
- Пользователь дает разрешение.
- Браузер создает объект подписки, содержащий эндпоинт (endpoint) и ключи безопасности.
- Ваше React-приложение отправляет этот объект на ваш Golang-бэкенд.
- Ваш бэкенд сохраняет его в базе данных.
Вы должны использовать ключи VAPID для идентификации вашего сервера. Используйте публичный ключ для фронтенда и приватный ключ для бэкенда. Никогда не передавайте свой приватный ключ третьим лицам.
Реализация
В React вы регистрируете Service Worker для прослушивания push-событий. Этот воркер работает в фоновом режиме. Он получает данные и показывает уведомление пользователю.
В Golang вы используете библиотеку для обработки шифрования и VAPID-аутентификации. Ваш сервер считывает подписку из базы данных, шифрует полезную нагрузку (payload) и отправляет её в push-сервис браузера.
Масштабирование для продакшена
Простая настройка подходит для небольших проектов. Крупной системе требуется больше.
- Обработка нескольких устройств: у одного пользователя может быть телефон и ноутбук. Храните несколько подписок для каждого пользователя.
- Очистка данных: срок действия подписок истекает. Если вы получаете ошибку 404 или 410, удалите эту подписку из своей базы данных.
- Использование очередей: для миллионов пользователей используйте Kafka или аналогичные инструменты. Это позволит вашей системе обрабатывать уведомления асинхронно.
- Реализация повторных попыток: используйте экспоненциальную задержку (exponential backoff) для обработки сетевых сбоев.
WebSockets хороши для живых чатов, когда пользователь активен. Web Push лучше подходит для связи с пользователями, когда вкладка закрыта.