Panoramica delle notifiche push

Una panoramica delle notifiche push, del motivo per cui potresti utilizzarle e del loro funzionamento.

Kayce Basques

Matt Gaunt

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 ulteriormente 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 i 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:

1. 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.
2. Aggiunta della logica del server per inviare i messaggi ai dispositivi client.
3. Aggiunta della 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 per inviare notifiche push

Innanzitutto, il tuo sito web deve ottenere l'autorizzazione dell'utente per inviare notifiche push. Questo 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 una sorta 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 iscrizione dell'utente alle notifiche push. Ciò avviene mediante JavaScript e 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 del servizio web che invii al servizio push è nota come richiesta di protocollo push web. La richiesta di protocollo web push deve includere:

• Quali dati includere nel messaggio.
• A quale client 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.

Di solito, la richiesta di protocollo web push viene effettuata tramite un server controllato da te. Naturalmente, il server non deve necessariamente creare la richiesta del servizio web non elaborata. Esistono librerie che possono gestire questa operazione, come web-push-libs. Tuttavia, il meccanismo di base è una richiesta di servizio web tramite HTTP.

Il servizio push riceve la tua richiesta, la autentica e instrada 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. Tu, in qualità di sviluppatore del sito web, non hai alcun controllo su questo aspetto. Questo non è un problema perché la richiesta di protocollo web push è 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 di 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 di endpoint corrisponde alle informazioni dell'identificatore client che consentono al servizio push di determinare esattamente a quale client eseguire il push del messaggio.

Per la crittografia vengono utilizzati keys, la cui spiegazione viene illustrata 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, in teoria, questo servizio push potrebbe non essere sicuro o non 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 fornisce 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 l'applicazione. Il processo di autenticazione funziona più o meno nel seguente modo:

• Puoi generare le chiavi pubbliche e private come attività una tantum. La combinazione di chiave privata e pubblica è nota come chiavi del server delle applicazioni. 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 al endpoint.
• 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 per quanto tempo il servizio push deve tentare di consegnare 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

Dopo aver inviato la richiesta di protocollo push web al servizio push, quest'ultimo mantiene la richiesta in coda finché non si verifica uno dei seguenti eventi:

1. Il client viene attivato e il servizio push invia il messaggio push.
2. Il messaggio scade.

Quando un browser client riceve un messaggio push, decripta i dati del messaggio push e invia un evento push al tuo 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. 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 funziona il push
• Registrazione di un utente
• UX per le autorizzazioni
• Invio di messaggi con le librerie push sul web
• 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 segnalazione di bug

Codelab

• Creare un client di notifiche push
• Creare un server di notifiche push