Come funziona il push

Matt Gaunt

Prima di entrare nel dettaglio dell'API, diamo un'occhiata generale al push, dall'inizio alla fine. In questo modo, quando in seguito esamineremo i singoli argomenti o le singole API, avrai un'idea di come e perché sono importanti.

I tre passaggi chiave per l'implementazione della modalità push sono:

1. Aggiunta della logica lato client per iscrivere un utente alle notifiche push (ovvero il codice JavaScript e l'interfaccia utente nell'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 service worker che riceverà un "evento push" quando il push arriva sul dispositivo. È in questo 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'iscrivere un utente alla messaggistica push.

Per iscrivere un utente sono necessarie due cose. Innanzitutto, ottenere l'autorizzazione dell'utente a inviargli messaggi push. In secondo luogo, l'ottenimento di un PushSubscription dal browser.

Un PushSubscription contiene tutte le informazioni di cui abbiamo bisogno per inviare un messaggio push a quell'utente. Puoi considerarlo "in un certo senso" come un ID per il dispositivo dell'utente.

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

Browser Support

• 42
• 17
• 44
• 16

Source

Prima di iscrivere un utente, dovrai generare un insieme di "chiavi del server applicazioni", che tratteremo 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 iscritto un utente e di garantire che sia lo stesso server ad attivare i messaggi push per quell'utente.

Una volta che l'utente si è iscritto e hai un PushSubscription, dovrai inviare i dettagli di PushSubscription al tuo backend/server. Sul tuo server, salverai questo abbonamento in un database e lo utilizzerai per inviare un messaggio push all'utente.

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 includerebbe i dati da inviare, il destinatario del messaggio ed eventuali criteri su come inviare il messaggio. In genere, questa chiamata API viene eseguita dal tuo server.

Alcune domande che potresti porti:

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

Chi e che cos'è il servizio push?

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 finché il browser non torna online.

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

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

Di seguito è riportato un esempio dei valori che riceverai da una 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 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 pattern.

Le chiavi nella sottoscrizione verranno trattate più avanti.

Che aspetto ha l'API?

Ho accennato al fatto che ogni servizio di push web prevede la stessa chiamata API. Questa API è il protocollo Web Push. Si tratta di 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 uno stream di byte. Esamineremo le librerie che possono eseguire questa chiamata API per noi, nonché come farlo autonomamente.

Cosa può fare l'API?

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

I dati inviati con un messaggio push devono essere criptati. In questo modo, i servizi push, che potrebbero essere chiunque, non possono visualizzare i dati inviati con il messaggio push. Questo è importante dato che è il browser a decidere quale servizio push utilizzare, il che potrebbe aprire la strada a browser che utilizzano un servizio push non sicuro o protetto.

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 non potrà recapitare i messaggi. Le istruzioni che puoi dare al servizio push definiscono il modo in cui il messaggio push viene inserito in coda.

Le istruzioni includono dettagli come:

• La durata di un messaggio push. Questo valore definisce per quanto tempo un messaggio deve essere messo in coda prima di essere rimosso e non recapitato.

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

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

Passaggio 3: evento push sul dispositivo dell'utente

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

1. Il dispositivo si connette e il servizio push recapita 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 recapita un messaggio, il browser lo riceve, decripta i dati e invia un evento push nel 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 JavaScript quando il browser è chiuso. Un service worker dispone anche di API, come push, che non sono disponibili nella pagina web (ovvero API che non sono 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 nella cache le pagine offline e mostrare notifiche.

Questo è l'intero flusso per la messaggistica push.

Passaggi successivi

• Panoramica delle notifiche push web
• Come funziona Push
• Iscrizione di un utente
• UX delle autorizzazioni
• Invio di messaggi con le librerie di 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

• Crea un client per le notifiche push
• Crea un server di notifiche push