Jak działają powiadomienia Web Push od strony wewnętrznej
Widzisz powiadomienia o nowych wiadomościach, aktualizacjach zamówień lub przypomnieniach o płatnościach.
Wygląda to prosto. Twój backend wysyła wiadomość, a użytkownik ją otrzymuje.
W rzeczywistości proces ten angażuje wiele elementów. Twój backend nigdy nie komunikuje się bezpośrednio z przeglądarką. Zamiast tego korzysta z usługi Push Service.
Google Chrome korzysta z Firebase Cloud Messaging. Firefox korzysta z Mozilla Push Service.
Przepływ pracy wygląda następująco:
Backend → Push Service → Przeglądarka → Service Worker → Użytkownik
Oto jak zbudować taki system przy użyciu React i Golang.
Komponenty
- Frontend (React): Prosi o uprawnienia i rejestruje Service Worker.
- Service Worker: Skrypt działający w tle, który żyje w przeglądarce. Obsługuje zdarzenia nawet wtedy, gdy Twoja strona internetowa jest zamknięta.
- Backend (Golang): Przechowuje subskrypcje i wysyła zaszyfrowane wiadomości.
- Push Service: Pośrednik, który dostarcza wiadomość do przeglądarki.
Przepływ subskrypcji
Aby wysłać wiadomość, potrzebujesz subskrypcji.
- Użytkownik udziela uprawnień.
- Przeglądarka generuje obiekt subskrypcji zawierający endpoint oraz klucze bezpieczeństwa.
- Twoja aplikacja React wysyła ten obiekt do Twojego backendu w Golang.
- Twój backend zapisuje go w bazie danych.
Musisz używać kluczy VAPID, aby zidentyfikować swój serwer. Użyj klucza publicznego dla frontendu i klucza prywatnego dla backendu. Nigdy nie udostępniaj swojego klucza prywatnego.
Implementacja
W React rejestrujesz Service Worker, aby nasłuchiwał zdarzeń push. Ten worker działa w tle. Odbiera dane i wyświetla powiadomienie użytkownikowi.
W Golang używasz biblioteki do obsługi szyfrowania i uwierzytelniania VAPID. Twój serwer odczytuje subskrypcję z bazy danych, szyfruje payload i wysyła go do usługi push przeglądarki.
Skalowanie do produkcji
Prosta konfiguracja sprawdza się w małych projektach. Duży system wymaga czegoś więcej.
- Obsługa wielu urządzeń: Jeden użytkownik może mieć telefon i laptop. Przechowuj wiele subskrypcji na jednego użytkownika.
- Czyszczenie danych: Subskrypcje wygasają. Jeśli otrzymasz błąd 404 lub 410, usuń tę subskrypcję z bazy danych.
- Używaj kolejek: Dla milionów użytkowników użyj Kafki lub podobnego narzędzia. Pozwala to systemowi przetwarzać powiadomienia asynchronicznie.
- Wdróż ponawianie prób: Użyj mechanizmu exponential backoff, aby radzić sobie z awariami sieci.
WebSockets są dobre do czatów na żywo, gdy użytkownik jest aktywny. Web Push jest lepszy do docierania do użytkowników, gdy karta jest zamknięta.