Come funziona il push

Prima di approfondire l'API, esaminiamo le notifiche push a livello generale, dall'inizio alla fine. In seguito, quando esamineremo i singoli argomenti o le API, avrai un'idea di come e perché sono importanti.

I tre passaggi chiave per implementare le notifiche push sono:

1. Aggiungere la logica lato client per registrare un utente alle notifiche push (ovvero il codice JavaScript e l'interfaccia utente nella tua app web che registra un utente per ricevere notifiche push).
2. La chiamata API dal backend / dall'applicazione che attiva una notifica push sul dispositivo di un utente.
3. Il file JavaScript del service worker che riceverà un "evento push" quando la notifica push arriva sul dispositivo. È in questo codice JavaScript che potrai mostrare una notifica.

Esaminiamo ciascuno di questi passaggi in modo più dettagliato.

Passaggio 1: lato client

Il primo passaggio consiste nel "registrare" un utente per ricevere notifiche push.

La registrazione di un utente richiede due cose. Innanzitutto, ottenere l'autorizzazione dell'utente a inviargli notifiche push. In secondo luogo, ottenere un PushSubscription dal browser.

Un PushSubscription contiene tutte le informazioni necessarie per inviare una notifica push a un utente. Puoi considerarlo come un ID per il dispositivo dell'utente.

Tutto questo viene fatto in JavaScript con l'API Push.

Prima di registrare un utente, dovrai generare un insieme di "chiavi del server applicazioni", di cui parleremo più avanti.

Le chiavi del server applicazioni, note anche come chiavi VAPID, sono univoche per il tuo server. Consentono a un servizio push di sapere quale server applicazioni ha registrato un utente e di assicurarsi che sia lo stesso server a attivare le notifiche push per quell'utente.

Una volta registrato l'utente e ottenuto un PushSubscription, dovrai inviare i dettagli di PushSubscription al backend / server. Sul server, salverai questo abbonamento in un database e lo utilizzerai per inviare una notifica push all'utente.

Passaggio 2: invia una notifica push

Quando vuoi inviare una notifica push ai tuoi utenti, devi effettuare una chiamata API a un servizio push. Questa chiamata API includerà i dati da inviare, i destinatari del messaggio e tutti i criteri relativi alla modalità di invio del messaggio. In genere, questa chiamata API viene eseguita dal server.

Ecco alcune domande che potresti porti:

• Chi e che cos'è il servizio push?
• Che aspetto ha l'API? È JSON, XML o altro?
• Che cosa può fare l'API?

Chi e che cos'è il servizio push?

Un servizio push riceve una richiesta di rete, la convalida e invia una notifica push al browser appropriato. Se il browser è offline, il messaggio viene messo in coda finché il browser non torna online.

Ogni browser può utilizzare il servizio push che preferisce, è qualcosa su cui gli sviluppatori non hanno alcun controllo. Questo non è un problema perché ogni servizio push si aspetta la stessa chiamata API. Ciò significa che non devi preoccuparti di chi sia il servizio push. Devi solo assicurarti che la chiamata API sia valida.

Per ottenere l'URL appropriato per attivare una notifica push (ovvero l'URL del servizio push), devi solo esaminare il valore endpoint in un PushSubscription.

Di seguito è riportato un esempio dei valori che otterrai da un PushSubscription:

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

In questo caso, l'endpoint è https://random-push-service.com/some-kind-of-unique-id-1234/v2/. Il servizio push sarebbe "random-push-service.com" e ogni endpoint è univoco per un utente, indicato con "some-kind-of-unique-id-1234". Man mano che inizi a utilizzare le notifiche push, noterai questo pattern.

Le chiavi dell'abbonamento verranno trattate più avanti.

Che aspetto ha l'API?

Ho detto che ogni servizio di notifiche push web si aspetta la stessa chiamata API. Questa API è il protocollo Web Push. È uno standard IETF che definisce come effettuare una chiamata API a un servizio push.

La chiamata API richiede l'impostazione di determinate intestazioni e che i dati siano un flusso di byte. Esamineremo le librerie che possono eseguire questa chiamata API per noi, nonché come farlo da soli.

Che cosa può fare l'API?

L'API fornisce un modo per inviare un messaggio a un utente, con o senza dati, e fornisce istruzioni su come inviare il messaggio.

I dati inviati con una notifica push devono essere criptati. Il motivo è che impedisce ai servizi push, che potrebbero essere chiunque, di visualizzare i dati inviati con la notifica push. Questo è importante perché è il browser a decidere quale servizio push utilizzare, il che potrebbe aprire la porta ai browser che utilizzano un servizio push non sicuro.

Quando attivi una notifica push, il servizio push riceverà la chiamata API e metterà in coda il messaggio. Questo messaggio rimarrà in coda finché il dispositivo dell'utente non torna online e il servizio push non potrà inviare i messaggi. Le istruzioni che puoi fornire al servizio push definiscono la modalità di messa in coda della notifica push.

Le istruzioni includono dettagli come:

• Il time-to-live per una notifica push. Definisce per quanto tempo un messaggio deve essere messo in coda prima di essere rimosso e non inviato.

• Definisci l'urgenza del messaggio. Questo è utile nel caso in cui il servizio push preservi la durata della batteria degli utenti inviando solo messaggi ad alta priorità.

• Assegna a una notifica push un nome "argomento" che sostituirà qualsiasi messaggio in attesa con questo nuovo messaggio.

Passaggio 3: evento push sul dispositivo dell'utente

Una volta inviata una notifica push, il servizio push manterrà il messaggio sul server finché non si verifica uno dei seguenti eventi:

1. Il dispositivo torna online e il servizio push invia il messaggio.
2. Il messaggio scade. In questo caso, il servizio push rimuove il messaggio dalla coda e non verrà mai inviato.

Quando il servizio push invia un messaggio, il browser lo riceve, decripta i dati e invia un evento push nel service worker.

Un service worker è un "special" file JavaScript. Il browser può eseguire questo codice JavaScript senza che la pagina sia aperta. Può persino eseguire questo codice JavaScript quando il browser è chiuso. Un service worker ha anche API, come push, che non sono disponibili nella pagina web (ovvero API non disponibili al di fuori di uno script del service worker).

È all'interno dell'evento "push" del service worker che puoi eseguire qualsiasi attività in background. Puoi effettuare chiamate di analisi, memorizzare le pagine nella cache offline e mostrare le notifiche.

Questo è l'intero flusso per la messaggistica push.

Passaggi successivi

• Panoramica delle notifiche push web
• Come funzionano le notifiche push
• Registrare un utente
• UX delle autorizzazioni
• Invio di messaggi con le librerie di notifiche push web
• Protocollo Web Push
• Gestire gli eventi push
• Mostrare 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