Questa pagina è stata tradotta dall'API Cloud Translation.

Panoramica delle notifiche push

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

Kayce Basques

Matt Gaunt

Che cosa sono le notifiche push?

I messaggi push ti consentono di attirare l'attenzione dei tuoi utenti anche quando non utilizzano il tuo sito web. Si chiamano messaggi push perché puoi "inviare" informazioni agli utenti anche quando non sono attivi. Confronta la tecnologia push con la tecnologia pull per comprendere meglio questo concetto.

Le notifiche presentano piccoli blocchi di informazioni a un utente. I siti web possono utilizzare notifiche per informare gli utenti di eventi importanti e urgenti o di azioni che devono intraprendere. L'aspetto delle notifiche varia a seconda della piattaforma:

I messaggi push e le notifiche sono due tecnologie distinte, ma complementari. Push è la tecnologia per l'invio di messaggi dal tuo server agli utenti anche quando non utilizzano attivamente il tuo sito web. Le notifiche sono la tecnologia per visualizzare le informazioni inviate sul dispositivo dell'utente. È possibile utilizzare le notifiche senza messaggi push. Un giorno potrebbe anche essere possibile utilizzare messaggi push senza notifiche rivolte agli utenti (push silenzioso), ma al momento i browser non lo consentono. In pratica, in genere vengono utilizzati insieme. Un utente non tecnico probabilmente non comprenderà la differenza tra messaggi push e notifiche. In questa raccolta, quando parliamo di notifiche push intendiamo la combinazione dell'invio di un messaggio e della sua visualizzazione come notifica. Quando parliamo di messaggi push, ci riferiamo alla tecnologia push stessa. Quando parliamo di notifiche, ci riferiamo alla tecnologia di notifica stessa.

Perché utilizzare le notifiche push?

Per gli utenti, le notifiche push sono un modo per ricevere informazioni tempestive, pertinenti e precise.
Per te, in qualità di proprietario di un sito web, le notifiche push sono un modo per aumentare il coinvolgimento degli utenti.

Come funzionano le notifiche push?

A livello generale, i passaggi chiave per implementare le notifiche push sono:

Aggiungere la logica del client per chiedere all'utente l'autorizzazione a inviare notifiche push e poi inviare le informazioni sull'identificatore del client al server per l'archiviazione in un database.
Aggiunta della logica del server per inviare i messaggi ai dispositivi client.
Aggiunta della logica del client per ricevere i messaggi inviati al dispositivo e visualizzarli come notifiche.

Il resto della pagina spiega questi passaggi in modo più dettagliato.

Ottenere l'autorizzazione per inviare notifiche push

Innanzitutto, il tuo sito web deve ottenere l'autorizzazione dell'utente per inviare notifiche push. Deve essere attivato da un gesto dell'utente, ad esempio facendo clic su un pulsante Sì accanto a una richiesta Do you want to receive push notifications?. Dopo la conferma, chiama Notification.requestPermission(). Il sistema operativo o il browser sul dispositivo dell'utente presenterà probabilmente un qualche tipo di interfaccia utente per confermare formalmente che l'utente vuole attivare le notifiche push. Questa UI varia in base alla piattaforma.

Iscrivi il cliente alle notifiche push

Dopo aver ottenuto l'autorizzazione, il tuo sito web deve avviare la procedura di registrazione dell'utente alle notifiche push. Questa operazione viene eseguita tramite JavaScript, utilizzando l'API Push. Dovrai fornire una chiave di autenticazione pubblica durante la procedura di abbonamento, di cui scoprirai di più in seguito. Dopo aver avviato la procedura di abbonamento, il browser invia una richiesta di rete a un servizio web noto come servizio push, di cui scoprirai di più in seguito.

Se l'abbonamento è andato a buon fine, il browser restituisce un oggetto PushSubscription. Dovrai archiviare questi dati a lungo termine. In genere, questo viene fatto inviando le informazioni a un server che controlli e poi facendo in modo che il server le memorizzi in un database.

Ricevi l'autorizzazione per inviare messaggi push. Ottieni PushSubscription. Invia PushSubscription al tuo server.

Inviare un messaggio push

Il server non invia effettivamente il messaggio push direttamente a un client. È ciò che fa un servizio push. Un servizio push è un servizio web controllato dal fornitore del browser dell'utente. Quando vuoi inviare una notifica push a un client, devi effettuare una richiesta di servizio web a un servizio push. La richiesta di servizio web che invii al servizio push è nota come richiesta di protocollo push web. La richiesta di protocollo push web deve includere:

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

In genere, la richiesta del protocollo push web viene effettuata tramite un server sotto il tuo controllo. Naturalmente, il server non deve necessariamente creare la richiesta del servizio web non elaborata. Esistono librerie che possono gestire questa operazione per te, ad esempio web-push-libs. Tuttavia, il meccanismo di base è una richiesta di servizio web tramite HTTP.

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

Il servizio push riceve la richiesta, la autentica e inoltra il messaggio push al client appropriato. Se il browser del cliente è offline, il servizio push mette in coda il messaggio push finché il browser non si connette a internet.

Ogni browser utilizza il servizio push che preferisce. Tu, in qualità di sviluppatore del sito web, non hai alcun controllo su questo. Non è un problema perché la richiesta del protocollo push web è standardizzata. In altre parole, non devi preoccuparti di quale servizio push stia utilizzando il fornitore del browser. Devi solo assicurarti che la richiesta di protocollo push web rispetti le specifiche. Tra le altre cose, le specifiche indicano che la richiesta deve includere determinate intestazioni e che i dati devono essere inviati come stream di byte.

Tuttavia, devi assicurarti di inviare la richiesta del protocollo push web 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 del messaggio endpoint è costituito da informazioni sull'identificatore del client che aiutano il servizio push a determinare esattamente a quale client inviare il messaggio.

I keys vengono utilizzati per la crittografia, come spiegato di seguito.

Cripta il messaggio push

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

Firmare le richieste del protocollo push web

Il servizio push offre un modo per impedire a chiunque altro di inviare messaggi ai tuoi utenti. Tecnicamente non è necessario, 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. La procedura di autenticazione funziona approssimativamente nel seguente modo:

Generi la chiave privata e la chiave pubblica come attività una tantum. La combinazione delle chiavi privata e pubblica è nota come chiavi del server dell'applicazione. Potresti anche trovarli indicati come chiavi VAPID. VAPID è la specifica che definisce questa procedura di autenticazione.
Quando registri un client alle notifiche push dal tuo codice JavaScript, fornisci la tua chiave pubblica. Quando il servizio push genera un endpoint per il dispositivo, associa la chiave pubblica fornita al endpoint.
Quando invii una richiesta di protocollo push web, firmi alcune informazioni JSON con la tua chiave privata.
Quando il servizio push riceve la tua richiesta di protocollo push web, utilizza la chiave pubblica memorizzata per autenticare le informazioni firmate. Se la firma è valida, il servizio push sa che la richiesta proviene da un server con la chiave privata corrispondente.

Personalizzare l'invio del messaggio push

La specifica della richiesta del protocollo push web definisce anche i parametri che ti 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 il tempo per cui il servizio push deve tentare di inviare un messaggio.
L'urgenza del messaggio, utile nel caso in cui il servizio push mantenga la durata della batteria del cliente inviando solo messaggi con priorità elevata.
L'argomento di un messaggio, che sostituisce eventuali messaggi in attesa dello stesso argomento con l'ultimo messaggio.

Ricevere e visualizzare i messaggi inviati come notifiche

Una volta inviata la richiesta di protocollo push web al servizio push, quest'ultimo mantiene la richiesta in coda fino a quando non si verifica uno dei seguenti eventi:

Il client viene attivato e il servizio push invia il messaggio push.
Il messaggio scade.

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

Il messaggio arriva sul dispositivo. Il browser riattiva il service worker. Viene inviato l'evento push.