Come funzionano internamente le notifiche push web
Vedi notifiche per nuovi messaggi, aggiornamenti di ordini o promemoria di pagamento.
Sembra semplice. Il tuo backend invia un messaggio e l'utente lo riceve.
In realtà, il processo coinvolge molte parti in movimento. Il tuo backend non comunica mai direttamente con il browser. Invece, utilizza un Push Service.
Google Chrome utilizza Firebase Cloud Messaging. Firefox utilizza il Mozilla Push Service.
Il flusso di lavoro funziona così:
Backend → Push Service → Browser → Service Worker → Utente
Ecco come costruire questo sistema utilizzando React e Golang.
I componenti
- Frontend (React): Richiede il permesso e registra un Service Worker.
- Service Worker: Uno script in background che risiede nel browser. Gestisce gli eventi anche quando il tuo sito web è chiuso.
- Backend (Golang): Memorizza le sottoscrizioni e invia messaggi criptati.
- Push Service: L'intermediario che consegna il messaggio al browser.
Il flusso di sottoscrizione
Per inviare un messaggio, hai bisogno di una sottoscrizione.
- L'utente concede il permesso.
- Il browser genera un oggetto di sottoscrizione contenente un endpoint e chiavi di sicurezza.
- La tua app React invia questo oggetto al tuo backend Golang.
- Il tuo backend lo salva in un database.
Devi utilizzare le chiavi VAPID per identificare il tuo server. Usa una chiave pubblica per il frontend e una chiave privata per il backend. Non condividere mai la tua chiave privata.
L'implementazione
In React, registri un Service Worker per ascoltare gli eventi push. Questo worker viene eseguito in background. Riceve i dati e mostra la notifica all'utente.
In Golang, utilizzi una libreria per gestire la crittografia e l'autenticazione VAPID. Il tuo server legge la sottoscrizione dal database, cripta il payload e lo invia al servizio push del browser.
Scalare per la produzione
Una configurazione semplice funziona per piccoli progetti. Un sistema di grandi dimensioni richiede di più.
- Gestire più dispositivi: Un utente potrebbe avere un telefono e un laptop. Memorizza più sottoscrizioni per utente.
- Pulizia dei dati: Le sottoscrizioni scadono. Se ricevi un errore 404 o 410, elimina quella sottoscrizione dal tuo database.
- Usa le code: Per milioni di utenti, usa Kafka o uno strumento simile. Questo consente al tuo sistema di elaborare le notifiche in modo asincrono.
- Implementa i tentativi (retries): Usa l'exponential backoff per gestire i guasti di rete.
I WebSocket sono ottimi per le chat dal vivo quando l'utente è attivo. Il Web Push è migliore per raggiungere gli utenti quando la scheda è chiusa.