Come funziona il push

Prima di esaminare l'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 fondamentali per implementare il push sono:

1. Aggiunta della logica lato client per iscriversi a un utente per i 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 o dall'applicazione che attiva un messaggio push al 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. Questo può essere considerato come un ID per il dispositivo di quell'utente.

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

Prima di iscrivere un utente, devi generare un insieme di "chiavi server delle applicazioni", che vedremo più avanti.

Le chiavi del server delle applicazioni, note anche come chiavi VAPID, sono univoche per il tuo server. Consentono a un servizio push di sapere quale server applicazioni ha sottoscritto un utente e di assicurarsi che sia lo stesso server ad attivare i messaggi push per l'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 questa sottoscrizione 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 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?
• Com'è 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 non sarà in grado di recapitare i messaggi. Le istruzioni che puoi fornire al servizio push definiscono il modo in cui il messaggio push viene messo in coda.

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 sospeso con il nuovo messaggio.

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 è online e il servizio push consegna 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 pagine in cache offline e mostrare notifiche.

Questo è l'intero flusso per i messaggi push.

Passaggi successivi

• Panoramica delle notifiche push web
• Come funziona Push
• Registrazione di un utente
• UX per le autorizzazioni
• Invio di messaggi con le librerie Web Push
• 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 bug dei report

Codelab

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