Questa pagina è stata tradotta dall'API Cloud Translation.

Panoramica delle notifiche push

Una panoramica su cosa sono le notifiche push, perché potresti utilizzarle e come funzionano.

Kayce Basques

Matt Gaunt

Che cosa sono le notifiche push?

I messaggi push ti consentono di portare informazioni all'attenzione degli utenti anche quando non stanno utilizzando il tuo sito web. Sono chiamati messaggi push perché puoi "push" di informazioni agli utenti anche quando non sono attivi. Confronta la tecnologia push con la tecnologia Pull per comprendere meglio questo concetto.

Le notifiche mostrano all'utente piccoli blocchi di informazioni. I siti web possono usare le notifiche per comunicare agli utenti eventi o azioni importanti e urgenti che l'utente deve intraprendere. L'aspetto delle notifiche varia a seconda della piattaforma:

I messaggi push e le notifiche sono due tecnologie separate ma complementari. Il push è la tecnologia che consente di inviare messaggi dal tuo server agli utenti anche quando non stanno utilizzando attivamente il tuo sito web. Le notifiche sono la tecnologia per visualizzare le informazioni inviate sul dispositivo dell'utente. È possibile usare le notifiche senza messaggi push. Un giorno potrebbe anche essere possibile utilizzare i messaggi push senza notifiche rivolte all'utente (push silenzioso), ma al momento i browser non lo consentono. In pratica, vengono generalmente utilizzati insieme. Un utente non tecnico probabilmente non comprenderà la differenza tra messaggi push e notifiche. In questa raccolta, per notifiche push si intende la combinazione di push di un messaggio, seguito dalla visualizzazione come notifica. Quando diciamo messaggi push, ci riferiamo alla tecnologia push da sola. Per notifiche ci riferiamo alla tecnologia di notifica.

Perché utilizzare le notifiche push?

Per gli utenti, le notifiche push consentono di ricevere informazioni tempestive, pertinenti e precise.
Per i proprietari di siti web, le notifiche push sono un modo per aumentare il coinvolgimento degli utenti.

Come funzionano le notifiche push?

A livello generale, i passaggi principali per l'implementazione delle notifiche push sono:

Aggiungere la logica client per chiedere all'utente l'autorizzazione a inviare notifiche push, quindi inviare le informazioni degli identificatori client al server per l'archiviazione in un database.
Aggiunta della logica del server per eseguire il push dei messaggi ai dispositivi client.
Aggiunta della logica client per ricevere i messaggi inviati al dispositivo e visualizzazione dei messaggi sotto forma di notifiche.

Nel resto di questa pagina vengono spiegati questi passaggi in modo più dettagliato.

Richiedere l'autorizzazione per inviare notifiche push

Innanzitutto, il tuo sito web deve ottenere l'autorizzazione dell'utente per inviare notifiche push. Ciò dovrebbe essere attivato da un gesto dell'utente, ad esempio il clic su un pulsante Sì accanto a una richiesta di tipo Do you want to receive push notifications?. Dopo questa conferma, chiama il numero Notification.requestPermission(). È probabile che il sistema operativo o il browser sul dispositivo dell'utente presenterà un tipo di UI per confermare formalmente che l'utente vuole attivare le notifiche push. Questa UI varia a seconda della piattaforma.

Iscrivere il client alle notifiche push

Dopo che hai ottenuto l'autorizzazione, il tuo sito web deve avviare il processo per iscrivere l'utente alle notifiche push. Questa operazione viene eseguita tramite JavaScript, utilizzando l'API Push. Dovrai fornire una chiave di autenticazione pubblica durante il processo di abbonamento, di cui parleremo più avanti. Dopo l'avvio del processo di abbonamento, il browser invia una richiesta di rete a un servizio web chiamato servizio push, di cui parleremo in seguito.

Supponendo che la sottoscrizione sia andata a buon fine, il browser restituisce un oggetto PushSubscription. Dovrai archiviare questi dati a lungo termine. Di solito, questo avviene inviando le informazioni a un server controllato da te e il server le archivia in un database.

Ottieni l'autorizzazione per inviare messaggi push. Scarica PushSubscription. Inviare
PushSubscription al tuo server.

Inviare un messaggio push

Il tuo server non invia il messaggio push direttamente a un client. Un servizio push lo fa. Un servizio push è un servizio web controllato dal fornitore del browser dell'utente. Quando vuoi inviare una notifica push a un client, devi inviare una richiesta da parte di un servizio web a un servizio push. La richiesta del servizio web inviata al servizio push è nota come richiesta del protocollo web push. La richiesta del protocollo web push deve includere:

Quali dati includere nel messaggio.
Il client a cui inviare il messaggio.
Istruzioni su come il servizio push deve recapitare il messaggio. Ad esempio, puoi specificare che il servizio push debba interrompere i tentativi di invio del messaggio dopo 10 minuti.

In genere, la richiesta del protocollo web push viene effettuata tramite un server controllato da te. Naturalmente, il server non deve creare autonomamente la richiesta non elaborata del servizio web. Esistono librerie che possono gestire questa situazione per te, come web-push-libs. Ma il meccanismo di base è una richiesta di servizio web su HTTP.

Il server invia una richiesta di protocollo web push al servizio push, che a sua volta invia il messaggio al dispositivo dell'utente.

Il servizio push riceve la richiesta, la autentica e instrada il messaggio push al client appropriato. Se il browser del client è offline, il servizio push mette in coda il messaggio push finché il browser non ritorna online.

Ogni browser utilizza il servizio push che preferisce. In qualità di sviluppatore di siti web, non avete alcun controllo in merito. Questo non è un problema perché la richiesta di protocollo web push è standardizzata. In altre parole, non devi preoccuparti di quale servizio push viene utilizzato dal fornitore del browser. Devi solo assicurarti che la richiesta del protocollo web push rispetti la specifica. Tra le altre cose, la specifica indica che la richiesta deve includere determinate intestazioni e che i dati devono essere inviati come flusso di byte.

Tuttavia, devi assicurarti di inviare la richiesta di protocollo web push al servizio push corretto. I dati PushSubscription che il browser ti ha restituito durante la procedura di abbonamento forniscono queste informazioni. Un oggetto PushSubscription ha il seguente aspetto:

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

Il dominio di endpoint è essenzialmente il servizio push. Il percorso di endpoint contiene informazioni sull'identificatore client che aiutano il servizio push a determinare esattamente a quale client eseguire il push del messaggio.

Per la crittografia vengono utilizzati i keys, come spiegato di seguito.

Cripta il messaggio push

I dati inviati a un servizio push devono essere criptati. Questo impedisce al servizio push di visualizzare i dati che invii al client. Ricorda che è il fornitore del browser a decidere quale servizio push utilizzare e che questo servizio in teoria potrebbe essere non sicuro o non sicuro. Il server deve utilizzare il keys fornito in PushSubscription per criptare le richieste del protocollo web push.

Firma le richieste del protocollo web push

Il servizio push fornisce un modo per impedire a chiunque altro di inviare messaggi ai tuoi utenti. Tecnicamente non devi farlo per te, ma l'implementazione più semplice su Chrome lo richiede. È facoltativo su Firefox. Altri browser potrebbero richiederlo in futuro.

Questo flusso di lavoro prevede una chiave privata e una chiave pubblica univoche per la tua applicazione. Il processo di autenticazione funziona più o meno nel seguente modo:

Puoi generare la chiave privata e pubblica come attività una tantum. La combinazione di chiave privata e pubblica è nota come chiavi del server delle applicazioni. Potresti anche vederle chiamate chiavi VAPID. VAPID è la specifica che definisce questo processo di autenticazione.
Quando sottoscrivi un client per le notifiche push dal tuo codice JavaScript, fornisci la tua chiave pubblica. Quando il servizio push genera un valore endpoint per il dispositivo, associa la chiave pubblica fornita a endpoint.
Quando invii una richiesta di protocollo web push, firmi alcune informazioni JSON con la tua chiave privata.
Quando il servizio push riceve la richiesta di protocollo web push, utilizza la chiave pubblica archiviata per autenticare le informazioni firmate. Se la firma è valida, il servizio push saprà che la richiesta proviene da un server con la chiave privata corrispondente.

Personalizza la consegna del messaggio push

La specifica della richiesta del protocollo web push definisce anche parametri che consentono di personalizzare il modo in cui il servizio push tenta di inviare il messaggio push al client. Ad esempio, puoi personalizzare:

La durata (TTL) di un messaggio, che definisce per quanto tempo il servizio push deve tentare di recapitare un messaggio.
L'urgenza del messaggio, utile nel caso in cui il servizio push preserva la batteria del client inviando solo messaggi ad alta priorità.
L'argomento di un messaggio, che sostituisce tutti i messaggi in sospeso dello stesso argomento con il messaggio più recente.

Ricevere e visualizzare i messaggi push sotto forma di notifiche

Dopo che hai inviato la richiesta del protocollo web push al servizio push, il servizio push mantiene la richiesta in coda fino a quando non si verifica uno dei seguenti eventi:

Il client ritorna online e il servizio push recapita il messaggio push.
Il messaggio scade.

Quando un browser client riceve un messaggio push, decripta i dati del messaggio e invia un evento push al tuo worker di servizio. Un service worker è fondamentalmente un codice JavaScript che può essere eseguito in background, anche quando il tuo sito web non è aperto o il browser è chiuso. Nel gestore di eventi push del tuo service worker, chiami ServiceWorkerRegistration.showNotification() per visualizzare le informazioni sotto forma di notifica.

Il messaggio arriva sul dispositivo. Il browser riattiva il service worker. L'evento push viene inviato.