Come funziona il push

Prima di passare all'API, diamo un'occhiata al push a livello generale, dall'inizio alla fine. Man mano che in seguito esamineremo i singoli argomenti o le singole API, capirai come e perché sono importanti.

I tre passaggi principali per implementare il push sono:

1. Aggiunta della logica lato client per sottoscrivere un utente al push (ad esempio, JavaScript e UI nella tua app web che registra un utente per il push dei messaggi).
2. La chiamata API dal backend o dall'applicazione che attiva un messaggio push sul dispositivo di un utente.
3. Il file JavaScript del service worker che riceverà un "evento push" all'arrivo del push sul dispositivo. Tramite questo codice JavaScript potrai mostrare una notifica.

Diamo un'occhiata a cosa implica ciascuno di questi passaggi.

Passaggio 1: lato client

Il primo passaggio consiste nell'iscrivere un utente ai messaggi push.

Per iscriversi a un utente sono necessari due aspetti. Il primo è ottenere l'autorizzazione dall'utente per inviare messaggi push all'utente. In secondo luogo, ottieni un PushSubscription dal browser.

Un PushSubscription contiene tutte le informazioni necessarie per inviare un messaggio push a quell'utente. Può essere considerato come un ID del dispositivo di quell'utente.

Tutte queste operazioni vengono eseguite in JavaScript con l'API Push.

Prima di iscriverti a un utente, devi generare un insieme di "chiavi server delle applicazioni", di cui parleremo più avanti.

Le chiavi del server delle applicazioni, anche denominate chiavi VAPID, sono univoche per il 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 quell'utente.

Dopo aver sottoscritto l'abbonamento dell'utente e aver ottenuto un PushSubscription, dovrai inviare i dettagli di PushSubscription al tuo backend / server. Sul server, salva questa sottoscrizione in un database e utilizzala per inviare un messaggio push all'utente.

Passaggio 2: invia un messaggio push

Quando vuoi inviare un messaggio push agli utenti, devi effettuare una chiamata API a un servizio push. Questa chiamata API includerebbe i dati da inviare, a chi inviare il messaggio ed eventuali criteri su come inviarlo. Generalmente questa chiamata API viene effettuata dal tuo server.

Ecco alcune domande che potresti farti:

• Chi e che cos'è il servizio push?
• Che aspetto ha l'API? È JSON, XML o qualcos'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 un messaggio push al browser appropriato. Se il browser è offline, il messaggio viene messo in coda fino a quando il browser non ritorna online.

Ogni browser può utilizzare qualsiasi servizio push che preferisce, ma 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 tua chiamata API sia valida.

Per ottenere l'URL appropriato per attivare un messaggio push (ovvero l'URL per il servizio push), devi solo controllare 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 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 la modalità push, noterai questo schema.

Le chiavi nell'abbonamento verranno trattate in seguito.

Che aspetto ha l'API?

Come dicevo, ogni servizio web push si aspetta la stessa chiamata API. Quest'API è il protocollo Web Push. È uno standard IETF che definisce il modo in cui si effettua una chiamata API a un servizio push.

La chiamata API richiede l'impostazione di determinate intestazioni e i dati devono essere un flusso di byte. Vedremo le librerie che possono eseguire questa chiamata API per noi e come farlo autonomamente.

Che cosa può fare l'API?

L'API consente di 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 aspetto è importante, dato che è il browser a decidere quale servizio push utilizzare e che potrebbe aprire le porte 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 fino a quando il dispositivo dell'utente non sarà online e il servizio push non sarà in grado di recapitare i messaggi. Le istruzioni che puoi dare al servizio push definiscono il modo in cui il messaggio push viene messo in coda.

Le istruzioni includono:

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

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

• Assegna a un messaggio push il nome "argomento" che sostituirà l'eventuale messaggio in sospeso con questo nuovo messaggio.

Passaggio 3: evento push sul dispositivo dell'utente

Dopo l'invio del messaggio push, il servizio push conserverà il messaggio sul proprio server finché non si verifica uno dei seguenti eventi:

1. Il dispositivo appare 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 consegna un messaggio, il browser lo riceve, decripta eventuali 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 tua pagina venga aperta. Può anche eseguire questo codice JavaScript quando il browser è chiuso. Un service worker include anche API che, ad esempio, push, non sono disponibili nella pagina web (ovvero API che non sono disponibili nello script di un service worker).

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

Questo è l'intero processo per i messaggi push.

Passaggi successivi

• Panoramica delle notifiche push web
• Come funziona Push
• Iscrizione di un utente
• UX delle autorizzazioni
• Invio di messaggi con librerie web push
• Protocollo web push
• Gestione degli eventi push
• Visualizzazione di una notifica
• Comportamento di notifica
• Pattern di notifica comuni
• Domande frequenti sulle notifiche push
• Problemi comuni e segnalazione di bug

Codelab

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