Questa pagina è stata tradotta dall'API Cloud Translation.

Panoramica delle notifiche push

Una panoramica delle notifiche push, del motivo per cui potresti utilizzarle e del loro funzionamento.

Kayce Basques

Matt Gaunt

Che cosa sono le notifiche push?

I messaggi push ti consentono di portare informazioni all'attenzione dei tuoi anche quando non utilizzano il tuo sito web. Si chiamano push perché puoi eseguire il "push" agli utenti, anche quando non attivo. Confronta push tecnologia con Pull tecnologia di comprendere questo concetto più a fondo.

Le notifiche presentano agli utenti piccoli blocchi di informazioni. I siti web possono utilizzare Notifiche per informare gli utenti di eventi o azioni importanti e urgenti l'utente deve eseguire. L'aspetto delle notifiche varia a seconda della piattaforma:

I messaggi push e le notifiche sono due tecnologie separate ma complementari. La tecnologia push è la tecnologia per inviare messaggi dal tuo server agli utenti anche quando non sta usando attivamente il tuo sito web. Le notifiche sono la tecnologia per che mostrano le informazioni inviate tramite push sul dispositivo dell'utente. È possibile utilizzare notifiche senza i messaggi push. Un giorno potresti anche usare i messaggi push senza notifiche rivolte agli utenti (push silenzioso), ma i browser non lo consentono. In pratica, di solito vengono utilizzati insieme. Un utente non tecnico probabilmente non capirà la differenza tra push messaggi e notifiche. In questa raccolta quando Per notifiche push intendiamo la combinazione di push di un messaggio. seguito da una visualizzazione sotto forma di notifica. Quando diciamo messaggi push ci riferiamo alla tecnologia push da sola. Quando diciamo notifiche ci riferiamo alla tecnologia di notifica da sola.

Perché usare le notifiche push?

Per gli utenti, le notifiche push sono un modo per ricevere contenuti tempestivi, pertinenti informazioni precise.
Per te (proprietario del sito web), le notifiche push sono un modo per aumentare e il coinvolgimento degli utenti.

di Gemini Advanced.

Come funzionano le notifiche push?

In linea generale, i passaggi principali per l'implementazione delle notifiche push sono:

Aggiunta della logica del client per chiedere all'utente l'autorizzazione a inviare notifiche push. quindi inviare informazioni sugli 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 di cui è stato eseguito il push al dispositivo e la visualizzazione sotto forma di notifiche.

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

Richiedere l'autorizzazione per inviare notifiche push

Innanzitutto, il tuo sito web deve avere l'autorizzazione dell'utente per inviare notifiche push. Questa operazione dovrebbe essere attivata da un gesto dell'utente, ad esempio il clic su un pulsante Sì accanto a un prompt Do you want to receive push notifications?. Dopo questa conferma, chiama Notification.requestPermission(). Il sistema operativo o browser sul dispositivo dell'utente probabilmente presenterà una sorta 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 aver ottenuto l'autorizzazione, il tuo sito web deve avviare il processo di l'iscrizione dell'utente alle notifiche push. Questo viene fatto tramite JavaScript, utilizzando l'API Push. Dovrai fornire una chiave di autenticazione pubblica durante il processo di abbonamento, di cui parleremo più avanti. Dopo il giorno all'inizio della procedura di abbonamento, il browser invia una richiesta di rete a un servizio web noto come servizio push, di cui parleremo in seguito.

Supponendo che l'abbonamento sia andato a buon fine, il browser restituisce un PushSubscription . Dovrai archiviare questi dati a lungo termine. Di solito, per farlo, invia le informazioni a un server controllato da te, e quindi fare in modo che il server la archivi in un database.

Richiedere l'autorizzazione per inviare messaggi push. Recupera PushSubscription. Invia
Esegui il push della sottoscrizione al server.

Invia un messaggio push

Il tuo server non invia il messaggio push direttamente al client. R servizio push. Un servizio push è un servizio web controllato dal tuo il fornitore del browser dell'utente. Quando vuoi inviare una notifica push a un client, ti serve per effettuare una richiesta di servizio web a un servizio push. La richiesta del servizio web che invii al servizio push è nota come richiesta di protocollo push web. La la richiesta di protocollo web push deve includere:

Quali dati includere nel messaggio.
A quale client inviare il messaggio.
Istruzioni sulla modalità di recapito del messaggio da parte del servizio push. Ad esempio, può specificare che il servizio push deve interrompere il tentativo di inviare il messaggio dopo 10 minuti.

Di solito, la richiesta di protocollo web push viene effettuata tramite un server controllato da te. Ovviamente, il tuo server non deve necessariamente creare una richiesta non elaborata del servizio web. per trovare le regole. Esistono librerie che possono aiutarti a gestire questo aspetto, come web-push-libs. Ma il meccanismo di base è una richiesta di servizio web su HTTP.

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

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

Ogni browser utilizza il servizio push desiderato. In qualità di sviluppatore di siti web non ne hanno alcun controllo. Questo non è un problema perché il protocollo web push La richiesta è standardizzata. In altre parole, non devi preoccuparti di quale servizio push sia il fornitore del browser che utilizzano. Devi solo assicurarti che la richiesta del protocollo web push rispetti le specifiche. Tra le altre cose, le specifiche affermano che la richiesta deve includere determinate intestazioni e i dati devono essere inviati come flusso di byte.

Tuttavia, devi assicurarti di inviare il protocollo web push una richiesta al servizio push corretto. I dati PushSubscription che browser restituito all'utente durante la procedura di abbonamento fornisce questo 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 endpoint è un identificatore client che consente al servizio push di determinare esattamente a quale client eseguire il push del messaggio.

Per la crittografia vengono utilizzati keys, la cui spiegazione viene riportata di seguito.

Cripta il messaggio push

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

Firma le richieste di protocollo push web

Il servizio push offre un modo per impedire a chiunque altro di inviare messaggi al tuo utenti. Tecnicamente non è necessario farlo, ma l'implementazione più semplice sulle Chrome lo richiede. È facoltativo su Firefox. Altri browser potrebbero richiederla in futuro.

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

Puoi generare le chiavi pubbliche e private come attività una tantum. La combinazione della chiave pubblica e privata è noto come chiavi del server delle applicazioni. Potrebbero essere chiamati anche VAPID chiave. VAPID è la specifica che definisce questo processo di autenticazione.
Quando ti abboni a un client per ricevere 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 a endpoint.
Quando invii una richiesta di protocollo push web, firmi alcune informazioni JSON con la tua chiave privata.
Quando il servizio push riceve la richiesta di protocollo push web, utilizza lo spazio chiave pubblica per autenticare le informazioni firmate. Se la firma è valida il servizio push sa che la richiesta proviene da un server con corrispondente alla chiave privata.

Personalizza la consegna del messaggio push

La specifica della richiesta di protocollo web push definisce anche parametri che ti consentono 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, che è utile nel caso in cui il servizio push conservi la durata della batteria del client quando vengono inviati solo messaggi ad alta priorità.
L'argomento di un messaggio, che sostituisce eventuali messaggi in sospeso dello stesso argomento con il messaggio più recente.

Ricevere e visualizzare i messaggi inviati come notifiche

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

Il client è online e il servizio push consegna il messaggio.
Il messaggio scade.

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

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