Як працюють веб-пуш-сповіщення зсередини
Ви бачите сповіщення про нові повідомлення, оновлення замовлень або нагадування про оплату.
Це виглядає просто. Ваш бекенд надсилає повідомлення, і користувач його отримує.
Насправді цей процес складається з багатьох компонентів. Ваш бекенд ніколи не спілкується з браузером напряму. Замість цього він використовує Push Service.
Google Chrome використовує Firebase Cloud Messaging. Firefox використовує Mozilla Push Service.
Робочий процес виглядає так:
Backend → Push Service → Browser → Service Worker → Користувач
Ось як побудувати таку систему за допомогою React та Golang.
Компоненти
- Frontend (React): запитує дозвіл і реєструє Service Worker.
- Service Worker: фоновий скрипт, який працює в браузері. Він обробляє події, навіть коли ваш вебсайт закрито.
- Backend (Golang): зберігає підписки та надсилає зашифровані повідомлення.
- Push Service: посередник, який доставляє повідомлення в браузер.
Процес підписки
Щоб надіслати повідомлення, вам потрібна підписка.
- Користувач надає дозвіл.
- Браузер генерує об'єкт підписки, що містить endpoint та ключі безпеки.
- Ваш React-додаток надсилає цей об'єкт на ваш Golang-бекенд.
- Ваш бекенд зберігає його в базі даних.
Ви повинні використовувати VAPID-ключі для ідентифікації вашого сервера. Використовуйте публічний ключ для фронтенду та приватний ключ для бекенду. Ніколи не поширюйте свій приватний ключ.
Реалізація
У React ви реєструєте Service Worker для прослуховування push-подій. Цей воркер працює у фоновому режимі. Він отримує дані та показує сповіщення користувачеві.
У Golang ви використовуєте бібліотеку для обробки шифрування та VAPID-автентифікації. Ваш сервер зчитує підписку з бази даних, шифрує payload і надсилає його в push-сервіс браузера.
Масштабування для продакшену
Проста конфігурація підходить для невеликих проєктів. Велика система потребує більшого.
- Обробка кількох пристроїв: один користувач може мати телефон і ноутбук. Зберігайте кілька підписок для кожного користувача.
- Очищення даних: термін дії підписок закінчується. Якщо ви отримуєте помилку 404 або 410, видаліть цю підписку з вашої бази даних.
- Використання черг: для мільйонів користувачів використовуйте Kafka або подібні інструменти. Це дозволить вашій системі обробляти сповіщення асинхронно.
- Впровадження повторних спроб: використовуйте exponential backoff для обробки збоїв мережі.
WebSockets добре підходять для живих чатів, коли користувач активний. Web Push краще підходить для зв'язку з користувачами, коли вкладка закрито.