Una panoramica di cosa sono le notifiche push, perché utilizzarle e come funzionano.
Che cosa sono le notifiche push?
I messaggi push ti consentono di attirare l'attenzione dei tuoi utenti anche quando non utilizzano il tuo sito web. Si chiamano messaggi push perché puoi "inviare" informazioni agli utenti anche quando non sono attivi. Confronta la tecnologia push con la tecnologia pull per comprendere meglio questo concetto.
Le notifiche presentano piccoli blocchi di informazioni a un utente. I siti web possono utilizzare notifiche per informare gli utenti di eventi importanti e urgenti o di azioni che devono intraprendere. L'aspetto delle notifiche varia a seconda della piattaforma:
I messaggi push e le notifiche sono due tecnologie distinte, ma complementari. Push è la tecnologia per l'invio di messaggi dal tuo server agli utenti anche quando non utilizzano attivamente il tuo sito web. Le notifiche sono la tecnologia per visualizzare le informazioni inviate sul dispositivo dell'utente. È possibile utilizzare le notifiche senza messaggi push. Un giorno potrebbe anche essere possibile utilizzare messaggi push senza notifiche rivolte agli utenti (push silenzioso), ma al momento i browser non lo consentono. In pratica, in genere vengono utilizzati insieme. Un utente non tecnico probabilmente non comprenderà la differenza tra messaggi push e notifiche. In questa raccolta, quando parliamo di notifiche push intendiamo la combinazione dell'invio di un messaggio e della sua visualizzazione come notifica. Quando parliamo di messaggi push, ci riferiamo alla tecnologia push stessa. Quando parliamo di notifiche, ci riferiamo alla tecnologia di notifica stessa.
Perché utilizzare le notifiche push?
- Per gli utenti, le notifiche push sono un modo per ricevere informazioni tempestive, pertinenti e precise.
- Per te, in qualità di proprietario di un sito web, le notifiche push sono un modo per aumentare il coinvolgimento degli utenti.
Come funzionano le notifiche push?
A livello generale, i passaggi chiave per implementare le notifiche push sono:
- Aggiungere la logica del client per chiedere all'utente l'autorizzazione a inviare notifiche push e poi inviare le informazioni sull'identificatore del client al server per l'archiviazione in un database.
- Aggiunta della logica del server per inviare i messaggi ai dispositivi client.
- Aggiunta della logica del client per ricevere i messaggi inviati al dispositivo e visualizzarli come notifiche.
Il resto della pagina spiega questi passaggi in modo più dettagliato.
Ottenere l'autorizzazione per inviare notifiche push
Innanzitutto, il tuo sito web deve ottenere l'autorizzazione dell'utente per inviare notifiche push.
Deve essere attivato da un gesto dell'utente, ad esempio facendo clic su un pulsante Sì accanto a una richiesta Do you want to receive push notifications?
. Dopo la conferma, chiama Notification.requestPermission()
. Il sistema operativo o il browser sul dispositivo dell'utente presenterà probabilmente un qualche tipo di interfaccia utente per confermare formalmente che l'utente vuole attivare le notifiche push. Questa UI varia in base alla piattaforma.
Iscrivi il cliente alle notifiche push
Dopo aver ottenuto l'autorizzazione, il tuo sito web deve avviare la procedura di registrazione dell'utente alle notifiche push. Questa operazione viene eseguita tramite JavaScript, utilizzando l'API Push. Dovrai fornire una chiave di autenticazione pubblica durante la procedura di abbonamento, di cui scoprirai di più in seguito. Dopo aver avviato la procedura di abbonamento, il browser invia una richiesta di rete a un servizio web noto come servizio push, di cui scoprirai di più in seguito.
Se l'abbonamento è andato a buon fine, il browser restituisce un oggetto
PushSubscription
. Dovrai archiviare questi dati a lungo termine.
In genere, questo viene fatto inviando le informazioni a un server che controlli e poi facendo in modo che il server le memorizzi in un database.
Inviare un messaggio push
Il server non invia effettivamente il messaggio push direttamente a un client. È ciò che fa un servizio push. Un servizio push è un servizio web controllato dal fornitore del browser dell'utente. Quando vuoi inviare una notifica push a un client, devi effettuare una richiesta di servizio web a un servizio push. La richiesta di servizio web che invii al servizio push è nota come richiesta di protocollo push web. La richiesta di protocollo push web deve includere:
- Quali dati includere nel messaggio.
- Il client a cui inviare il messaggio.
- Istruzioni su come il servizio push deve inviare il messaggio. Ad esempio, puoi specificare che il servizio push deve interrompere i tentativi di invio del messaggio dopo 10 minuti.
In genere, la richiesta del protocollo push web viene effettuata tramite un server sotto il tuo controllo. Naturalmente, il server non deve necessariamente creare la richiesta del servizio web non elaborata. Esistono librerie che possono gestire questa operazione per te, ad esempio web-push-libs. Tuttavia, il meccanismo di base è una richiesta di servizio web tramite HTTP.
Il servizio push riceve la richiesta, la autentica e inoltra il messaggio push al client appropriato. Se il browser del cliente è offline, il servizio push mette in coda il messaggio push finché il browser non si connette a internet.
Ogni browser utilizza il servizio push che preferisce. Tu, in qualità di sviluppatore del sito web, non hai alcun controllo su questo. Non è un problema perché la richiesta del protocollo push web è standardizzata. In altre parole, non devi preoccuparti di quale servizio push stia utilizzando il fornitore del browser. Devi solo assicurarti che la richiesta di protocollo push web rispetti le specifiche. Tra le altre cose, le specifiche indicano che la richiesta deve includere determinate intestazioni e che i dati devono essere inviati come stream di byte.
Tuttavia, devi assicurarti di inviare la richiesta del protocollo push web al servizio push corretto. I dati PushSubscription
che il browser ti ha restituito durante la procedura di abbonamento forniscono queste informazioni. Un oggetto PushSubscription
ha il seguente aspetto:
{
"endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
"expirationTime": null,
"keys": {
"p256dh": "BGyyVt9FFV…",
"auth": "R9sidzkcdf…"
}
}
Il dominio di endpoint
è essenzialmente il servizio push. Il percorso del messaggio endpoint
è costituito da informazioni sull'identificatore del client che aiutano il servizio push a determinare esattamente a quale client inviare il messaggio.
I keys
vengono utilizzati per la crittografia, come spiegato di seguito.
Cripta il messaggio push
I dati inviati a un servizio push devono essere criptati. In questo modo, il servizio push non potrà visualizzare i dati che invii al client.
Ricorda che è il fornitore del browser a decidere quale servizio push utilizzare e che questo servizio potrebbe teoricamente non essere sicuro. Il server deve utilizzare
keys
fornito in PushSubscription
per criptare le richieste del protocollo push web.
Firmare le richieste del protocollo push web
Il servizio push offre un modo per impedire a chiunque altro di inviare messaggi ai tuoi utenti. Tecnicamente non è necessario, ma l'implementazione più semplice su Chrome lo richiede. È facoltativo su Firefox. Altri browser potrebbero richiederlo in futuro.
Questo flusso di lavoro prevede una chiave privata e una chiave pubblica univoche per la tua applicazione. La procedura di autenticazione funziona approssimativamente nel seguente modo:
- Generi la chiave privata e la chiave pubblica come attività una tantum. La combinazione delle chiavi privata e pubblica è nota come chiavi del server dell'applicazione. Potresti anche trovarli indicati come chiavi VAPID. VAPID è la specifica che definisce questa procedura di autenticazione.
- Quando registri un client alle notifiche push dal tuo codice JavaScript,
fornisci la tua chiave pubblica. Quando il servizio push genera un
endpoint
per il dispositivo, associa la chiave pubblica fornita alendpoint
. - Quando invii una richiesta di protocollo push web, firmi alcune informazioni JSON con la tua chiave privata.
- Quando il servizio push riceve la tua richiesta di protocollo push web, utilizza la chiave pubblica memorizzata per autenticare le informazioni firmate. Se la firma è valida, il servizio push sa che la richiesta proviene da un server con la chiave privata corrispondente.
Personalizzare l'invio del messaggio push
La specifica della richiesta del protocollo push web definisce anche i parametri che ti consentono di personalizzare il modo in cui il servizio push tenta di inviare il messaggio push al client. Ad esempio, puoi personalizzare:
- La durata (TTL) di un messaggio, che definisce il tempo per cui il servizio push deve tentare di inviare un messaggio.
- L'urgenza del messaggio, utile nel caso in cui il servizio push mantenga la durata della batteria del cliente inviando solo messaggi con priorità elevata.
- L'argomento di un messaggio, che sostituisce eventuali messaggi in attesa dello stesso argomento con l'ultimo messaggio.
Ricevere e visualizzare i messaggi inviati come notifiche
Una volta inviata la richiesta di protocollo push web al servizio push, quest'ultimo mantiene la richiesta in coda fino a quando non si verifica uno dei seguenti eventi:
- Il client viene attivato e il servizio push invia il messaggio push.
- Il messaggio scade.
Quando un browser client riceve un messaggio push, decripta i dati del messaggio push e invia un evento push
al tuo worker di servizio. Un service worker è fondamentalmente codice JavaScript che può essere eseguito in background, anche quando il sito web non è aperto o il browser è chiuso. Nell'event handler push
del tuo service worker, chiami ServiceWorkerRegistration.showNotification()
per visualizzare le informazioni come notifica.
Passaggi successivi
- Panoramica delle notifiche push web
- Come funzionano le notifiche push
- Registrazione di un utente
- UX per le autorizzazioni
- Invio di messaggi con le librerie Web Push
- Protocollo Web Push
- Gestione degli eventi push
- Visualizzazione di una notifica
- Comportamento delle notifiche
- Pattern di notifica comuni
- Domande frequenti sulle notifiche push
- Problemi comuni e bug dei report