Come funziona il push

Matt Gaunt

Prima di passare all'API, esaminiamo il push da un punto di vista generale, dall'inizio alla fine. Poi, man mano che esamineremo i singoli argomenti o le API, avrai un'idea di come e perché sono importanti.

I tre passaggi chiave per l'implementazione di push sono:

  1. Aggiunta della logica lato client per abbonare un utente ai push (ovvero il codice JavaScript e l'interfaccia utente nella tua app web che registra un utente per i messaggi push).
  2. La chiamata API dal tuo backend / dalla tua applicazione che attiva un messaggio push sul dispositivo di un utente.
  3. Il file JavaScript del worker di servizio che riceverà un "evento push" quando il push arriva sul dispositivo. È in questo codice JavaScript che potrai mostrare una notifica.

Vediamo più nel dettaglio cosa comporta ciascuno di questi passaggi.

Passaggio 1: lato client

Il primo passaggio consiste nell'"abbonare" un utente alla messaggistica push.

Per abbonare un utente sono necessari due elementi. Innanzitutto, devi ottenere l'autorizzazione dell'utente per inviare messaggi push. In secondo luogo, ricevi un PushSubscription dal browser.

Un PushSubscription contiene tutte le informazioni di cui abbiamo bisogno per inviare un messaggio push all'utente. Puoi considerarlo un ID del dispositivo dell'utente.

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

Supporto dei browser

  • Chrome: 42.
  • Edge: 17.
  • Firefox: 44.
  • Safari: 16.

Origine

Prima di abbonare un utente, devi generare un insieme di "chiavi del server applicazioni", che verranno trattate in seguito.

Le chiavi del server dell'applicazione, note anche come chiavi VAPID, sono univoche per il tuo server. Consentono a un servizio push di sapere a quale server di applicazioni è stato sottoscritto un abbonamento da parte di un utente e di assicurarsi che sia lo stesso server che attiva i messaggi push per quell'utente.

Dopo aver sottoscritto l'abbonamento dell'utente e aver ottenuto un PushSubscription, dovrai inviare i dettagli del PushSubscription al tuo backend / server. Sul tuo server, salverai questo abbonamento in un database e lo utilizzerai per inviare un messaggio push all'utente.

Assicurati di inviare PushSubscription al tuo backend.

Passaggio 2: invia un messaggio push

Quando vuoi inviare un messaggio push ai tuoi utenti, devi effettuare una chiamata API a un servizio push. Questa chiamata API includerà i dati da inviare, a chi inviare il messaggio e eventuali criteri su come inviare il messaggio. In genere questa chiamata API viene eseguita dal server.

Ecco alcune domande che potresti porti:

  • Che cos'è il servizio push e chi lo gestisce?
  • Che aspetto ha l'API? È JSON, XML o qualcos\'altro?
  • Cosa può fare l'API?

Che cos'è il servizio push e chi lo gestisce?

Un servizio push riceve una richiesta di rete, la convalida e invia un messaggio push al browser appropriato. Se il browser è offline, il messaggio viene messo in coda fino a quando non si connette a internet.

Ogni browser può utilizzare qualsiasi servizio push, su cui gli sviluppatori non hanno alcun controllo. 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 dell'API sia valida.

Per ottenere l'URL appropriato per attivare un messaggio push (ovvero l'URL del servizio push), basta guardare il valore endpoint in un PushSubscription.

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

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

L'endpoint in questo caso è [https://random-push-service.com/some-kind-of-unique-id-1234/v2/]. Il servizio push sarà 'random-push-service.com' e ogni endpoint è univoco per un utente, indicato con 'some-kind-of-unique-id-1234'. Quando inizi a lavorare con il push, noterai questo schema.

Le chiavi nell'abbonamento verranno trattate più avanti.

Che aspetto ha l'API?

Ho detto che ogni servizio push web si aspetta la stessa chiamata API. Questa API è il protocollo push web. Si tratta di uno standard IETF che definisce la modalità di esecuzione di una chiamata API a un servizio push.

La chiamata all'API richiede l'impostazione di determinate intestazioni e che i dati siano uno stream di byte. Esamineremo le librerie che possono eseguire questa chiamata API per noi e come farlo autonomamente.

Cosa può fare l'API?

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

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

Quando attivi un messaggio push, il servizio push riceve la chiamata API e mette in coda il messaggio. Questo messaggio rimarrà in coda finché il dispositivo dell'utente non sarà online e il servizio push potrà inviare i messaggi. Le istruzioni che puoi dare al servizio push definiscono la modalità di messa in coda del messaggio push.

Le istruzioni includono dettagli quali:

  • Il time-to-live di un messaggio push. Definisce il tempo per cui un messaggio deve essere in coda prima di essere rimosso e non recapitato.

  • Definisci l'urgenza del messaggio. Questa opzione è utile se il servizio push preserva la durata della batteria degli utenti inviando solo messaggi con priorità elevata.

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

Quando il server vuole inviare un messaggio push, invia una richiesta di protocollo push web a un servizio push.

Passaggio 3: invia l'evento push sul dispositivo dell'utente

Una volta inviato un messaggio push, il servizio push manterrà il messaggio sul proprio server fino a quando non si verifica uno dei seguenti eventi:

  1. Il dispositivo si connette a internet 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 recapitato.

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

Un service worker è un file JavaScript "speciale". 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).

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

Quando un messaggio push viene inviato da un servizio push al dispositivo di un utente, il tuo service worker riceve un evento push

Questo è l'intero flusso per i messaggi push.

Passaggi successivi

Codelab