Una panoramica di cosa sono le notifiche push, perché potresti utilizzarle e come funzionano.
Cosa sono le notifiche push?
I messaggi push ti consentono di portare le informazioni all'attenzione dei tuoi utenti anche quando non utilizzano il tuo sito web. Vengono chiamati messaggi push perché puoi "inviare" informazioni ai tuoi 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 le notifiche per informare gli utenti di eventi importanti e urgenti o di azioni che l'utente deve intraprendere. L'aspetto delle notifiche varia a seconda delle piattaforme:
I messaggi push e le notifiche sono due tecnologie separate ma complementari. Push è la tecnologia per inviare messaggi dal tuo server agli utenti anche quando non utilizzano attivamente il tuo sito web. Notifiche è la tecnologia per visualizzare le informazioni inviate sul dispositivo dell'utente. È possibile utilizzare le notifiche senza messaggi push. Un giorno potrebbe essere possibile utilizzare i messaggi push senza notifiche rivolte agli utenti (push silenzioso), ma al momento i browser non lo consentono. In pratica, di solito vengono utilizzati insieme. Un utente non tecnico probabilmente non comprenderà la differenza tra messaggi push e notifiche. In questa raccolta, quando diciamo notifiche push intendiamo la combinazione di invio di un messaggio e visualizzazione come notifica. Quando diciamo messaggi push ci riferiamo alla tecnologia push in sé. E quando diciamo notifiche ci riferiamo alla tecnologia di notifica in sé.
Perché utilizzare le notifiche push?
- Per gli utenti, le notifiche push sono un modo per ricevere informazioni tempestive, pertinenti, e precise.
- Per te (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 quindi inviare le informazioni sull'identificatore del client al server per l'archiviazione in un database.
- Aggiungere la logica del server per inviare messaggi push ai dispositivi client.
- Aggiungere la logica del client per ricevere i messaggi inviati al dispositivo e visualizzarli come notifiche.
Il resto di questa pagina spiega questi passaggi in modo più dettagliato.
Ottenere l'autorizzazione a inviare notifiche push
Innanzitutto, il tuo sito web deve ottenere l'autorizzazione dell'utente a inviare notifiche push.
Questa operazione deve essere attivata dall'utente, ad esempio facendo clic su un pulsante Sì
accanto a un messaggio Do you want to receive push notifications?. Dopo la conferma,
chiama Notification.requestPermission(). Il sistema operativo o il browser sul dispositivo dell'utente probabilmente presenterà un tipo di UI per confermare formalmente che l'utente vuole attivare le notifiche push. Questa UI varia a seconda delle piattaforme.
Iscrivere il client alle notifiche push
Dopo aver ottenuto l'autorizzazione, il tuo sito web deve avviare la procedura di iscrizione dell'utente alle notifiche push. Questa operazione viene eseguita tramite JavaScript, utilizzando l'API Push. Durante la procedura di iscrizione dovrai fornire una chiave di autenticazione pubblica, di cui parleremo più avanti. Dopo aver avviato la procedura di iscrizione, il browser effettua una richiesta di rete a un servizio web noto come servizio push, di cui parleremo più avanti.
Supponendo che l'iscrizione sia andata a buon fine, il browser restituisce un
PushSubscription
oggetto. Dovrai archiviare questi dati a lungo termine.
In genere, questa operazione viene eseguita inviando le informazioni a un server che controlli e quindi facendo in modo che il server le memorizzi in un database.
Inviare un messaggio push
Il server non invia il messaggio push direttamente a un client. Lo 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:
- I dati da includere nel messaggio.
- Il client a cui inviare il messaggio.
- Le istruzioni su come il servizio push deve recapitare 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 di protocollo push web viene effettuata tramite un server che controlli. Naturalmente, il server non deve creare la richiesta di servizio web non elaborata. Esistono librerie che possono gestire questa operazione, ad esempio le web-push-libs. Tuttavia, il meccanismo sottostante è una richiesta di servizio web tramite HTTP.
Il servizio push riceve la richiesta, la autentica e invia il messaggio push al client appropriato. Se il browser del client è offline, il servizio push mette in coda il messaggio push finché il browser non torna online.
Ogni browser utilizza il servizio push che preferisce. In qualità di sviluppatore di siti web, non hai alcun controllo su questa operazione. Questo non è un problema perché la richiesta di protocollo push web è standardizzata. In altre parole, non devi preoccuparti del servizio push utilizzato dal fornitore del browser. Devi solo assicurarti che la richiesta di protocollo push web segua la specifica. Tra le altre cose, la specifica indica che la richiesta deve includere determinati header e che i dati devono essere inviati come flusso di byte.
Tuttavia, devi assicurarti di inviare la richiesta di protocollo push web al servizio push corretto. Le informazioni PushSubscription che il browser ti ha restituito durante la procedura di iscrizione 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 di endpoint è costituito da informazioni sull'identificatore del client che aiutano il servizio push a determinare esattamente a quale client inviare il messaggio push.
Le keys vengono utilizzate per la crittografia, che viene spiegata di seguito.
Criptare il messaggio push
I dati che invii a un servizio push devono essere criptati. In questo modo, il servizio push non può visualizzare i dati che invii al client.
Ricorda che il fornitore del browser decide quale servizio push utilizzare e che questo servizio push potrebbe teoricamente essere non sicuro. Il server deve utilizzare le keys fornite in PushSubscription per criptare le richieste di protocollo push web.
Firmare le richieste di protocollo push web
Il servizio push offre un modo per impedire a chiunque altro di inviare messaggi ai tuoi utenti. Tecnicamente non devi farlo, 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 all'incirca in questo modo:
- Genera la chiave privata e la chiave pubblica come attività una tantum. La combinazione di chiave privata e chiave pubblica è nota come chiavi del server applicazioni. Potresti anche vederle chiamate chiavi VAPID. VAPID è la specifica che definisce questa procedura di autenticazione.
- Quando iscrivi un client alle notifiche push dal codice JavaScript, fornisci la tua chiave pubblica. Quando il servizio push genera un
endpointper il dispositivo, associa la chiave pubblica fornita all'endpoint. - Quando invii una richiesta di protocollo push web, firmi alcune informazioni JSON con la tua chiave privata.
- Quando il servizio push riceve la 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 la consegna del messaggio push
La specifica della richiesta di 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:
- Il tempo di attività (TTL) di un messaggio, che definisce per quanto tempo il servizio push deve tentare di recapitare un messaggio.
- L'urgenza del messaggio, utile nel caso in cui il servizio push preservi la durata della batteria del client recapitando solo i messaggi ad alta priorità.
- L'argomento di un messaggio, che sostituisce tutti i messaggi in attesa dello stesso argomento con l'ultimo messaggio.
Ricevere e visualizzare i messaggi push come notifiche
Dopo aver inviato la richiesta di protocollo push web al servizio push, quest'ultimo la mantiene in coda finché non si verifica uno dei seguenti eventi:
- Il client torna online e il servizio push recapita 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 service
worker. Un service worker è fondamentalmente codice JavaScript che può essere eseguito in background, anche quando il sito web non è aperto o il browser è chiuso. Nel gestore di eventi push del service worker, chiama ServiceWorkerRegistration.showNotification() per visualizzare le informazioni come notifica.
Passaggi successivi
- Panoramica delle notifiche push web
- Come funziona il push
- Iscrivere un utente
- UX delle autorizzazioni
- Invio di messaggi con le librerie push web
- Protocollo push web
- Gestire i messaggi
- Visualizzare una notifica
- Comportamento delle notifiche
- Pattern di notifica comuni
- Domande frequenti sulle notifiche push
- Problemi comuni e segnalazione di bug