Come funziona il push

Matt Gaunt

Prima di addentrarci nell'API, diamo un'occhiata al push a un livello generale. Poi, mentre analizzerai i singoli argomenti o le API in seguito, avrai un'idea di come e perché importanti.

I tre passaggi fondamentali per implementare il push sono:

  1. Aggiunta della logica lato client per la sottoscrizione di un push da parte di un utente (ad es. JavaScript e UI nell'account app web che registra un utente per il push dei messaggi).
  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 service worker che riceverà un "evento push" quando arriva la spinta del dispositivo. È in questo codice JavaScript che puoi visualizzare una notifica.

Di seguito viene fornita una descrizione dettagliata di ciascun passaggio.

Passaggio 1: lato client

Il primo passaggio è "iscriversi" a un utente per inviare messaggi push.

L'iscrizione di un utente richiede due cose. Innanzitutto, devi ottenere l'autorizzazione dell'utente per l'invio i messaggi push. Secondo, recupero PushSubscription dal browser.

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

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

Supporto dei browser

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

Origine

Prima di iscrivere un utente, devi generare un insieme "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 servizio push per sapere quale server delle applicazioni ha sottoscritto un utente e verificare che sia lo stesso server che attiva i messaggi push a quell'utente.

Dopo aver effettuato l'iscrizione dell'utente e aver ricevuto un PushSubscription, dovrai inviare l' dettagli di PushSubscription al tuo backend / server. Sul tuo server, salverai questo un abbonamento a un database e utilizzarlo per inviare un messaggio push a quell'utente.

Assicurati di inviare la sottoscrizione push al tuo backend.

Passaggio 2: invia un messaggio push

Se vuoi inviare un messaggio push agli utenti, devi effettuare una chiamata API a un push. completamente gestito di Google Cloud. Questa chiamata API includerà i dati da inviare, a chi inviare il messaggio ed eventuali criteri su come inviare il messaggio. Normalmente questa chiamata API viene effettuata dal server.

Ecco alcune domande che potresti porti:

  • Chi e cos'è il servizio push?
  • Com'è l'API? È JSON, XML o qualcos'altro?
  • Cosa può fare l'API?

Chi e 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 fino a quando il browser non torna online.

Ogni browser può usare qualsiasi servizio push, ma gli sviluppatori non hanno alcun controllo oltre. Questo non è un problema perché ogni servizio push prevede la stessa chiamata API. Significato non devi preoccuparti di chi sia il servizio push. Devi solo assicurarti che la chiamata API è valido.

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

Di seguito è riportato un esempio dei valori che riceverai da una richiesta 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'. Quando inizi a lavorare con la pressione, noterai questo schema.

Le chiavi dell'abbonamento verranno trattate in un secondo momento.

Com'è l'API?

Ho detto che ogni servizio push web prevede la stessa chiamata API. Quest'API è Web Push Protocol. È uno standard IETF che definisce la modalità di esecuzione di 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. Lo faremo vediamo le librerie che possono eseguire questa chiamata API per noi e come fare autonomamente.

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 un messaggio push devono essere criptati. Il motivo è che impedisce ai servizi push, che possono essere chiunque, di visualizzare i dati inviati con messaggio push. Ciò è importante poiché è il browser a decidere quale servizio push che potrebbe aprire la porta ai browser usando un servizio push non sicuro.

Quando attivi un messaggio push, il servizio push riceve la chiamata API e accoda . Questo messaggio rimarrà in coda finché il dispositivo dell'utente non sarà online e non verrà eseguito il push può recapitare i messaggi. Le istruzioni che puoi fornire al servizio push definiscono il il messaggio push è in coda.

Le istruzioni includono dettagli quali:

  • La durata di un messaggio push. Definisce per quanto tempo un messaggio deve essere messo in coda prima viene rimosso e non viene consegnato.

  • Definisci l'urgenza del messaggio. Ciò è utile nel caso in cui il servizio push conservi il della batteria degli utenti offrendo solo messaggi ad alta priorità.

  • Assegna un "argomento" a un messaggio push che sostituirà eventuali messaggi in sospeso con il nuovo messaggio.

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

Passaggio 3: esegui il push dell'evento sul dispositivo dell'utente

Una volta che viene inviato un messaggio push, il servizio push lo conserverà sul suo server fino a quando 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 sarà mai pubblicato.

Quando il servizio push recapita un messaggio, il browser lo riceve, decripta qualsiasi e invia un evento push nel Service worker.

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

Si trova all'interno del comando "push" del service worker dell'evento in cui puoi eseguire attività in background. Tu può 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.

Si tratta dell'intero flusso per i messaggi push.

Passaggi successivi

Codelab