Codelab: creare un server di notifica push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

Questo codelab mostra passo passo come creare un server di notifiche push. Al termine del codelab avrai un server che:

  • Tiene traccia delle iscrizioni alle notifiche push (ovvero il server crea un nuovo record di database quando un client attiva le notifiche push ed elimina un record di database esistente quando un client le disattiva)
  • Invia una notifica push a un singolo cliente
  • Invia una notifica push a tutti i clienti iscritti

Questo codelab si concentra sull'apprendimento pratico e non approfondisce molto i concetti. Consulta l'articolo Come funzionano le notifiche push? per scoprire di più sui concetti relativi alle notifiche push.

Il codice client di questo codelab è già completo. In questo codelab implementerai solo il server. Per scoprire come implementare un client di notifiche push, consulta Codelab: Build a push notification client.

Compatibilità del browser

È noto che questo codelab funziona con le seguenti combinazioni di sistema operativo e browser:

  • Windows: Chrome, Edge
  • macOS: Chrome, Firefox
  • Android: Chrome, Firefox

È noto che questo codelab non funziona con i seguenti sistemi operativi (o combinazioni di sistema operativo e browser):

  • macOS: Brave, Edge, Safari
  • iOS

Stack di applicazioni

  • Il server è basato su Express.js.
  • La libreria Node.js web-push gestisce tutta la logica delle notifiche push.
  • I dati degli abbonamenti vengono scritti in un file JSON utilizzando lowdb.

Non devi utilizzare nessuna di queste tecnologie per implementare le notifiche push. Abbiamo scelto queste tecnologie perché offrono un'esperienza di codelab affidabile.

Configurazione

Configura l'autenticazione

Prima di poter ricevere le notifiche push, devi configurare il server e il client con le chiavi di autenticazione. Consulta la sezione Firma le richieste del protocollo web push per scoprire il motivo.

  1. Apri il terminale.
  2. Nel terminale, esegui npx web-push generate-vapid-keys. Copia i valori della chiave privata e della chiave pubblica.
  3. Apri .env e aggiorna VAPID_PUBLIC_KEY e VAPID_PRIVATE_KEY. Imposta VAPID_SUBJECT su mailto:[email protected]. Tutti questi valori devono essere racchiusi tra virgolette doppie. Dopo aver apportato gli aggiornamenti, il file .env dovrebbe essere simile a questo:
VAPID_PUBLIC_KEY="BKiwTvD9HA…" VAPID_PRIVATE_KEY="4mXG9jBUaU…" VAPID_SUBJECT="mailto:[email protected]"
  1. Apri public/index.js.
  2. Sostituisci VAPID_PUBLIC_KEY_VALUE_HERE con il valore della tua chiave pubblica.

Gestisci sottoscrizioni

Il tuo cliente gestisce la maggior parte della procedura di abbonamento. Le principali attività che il server deve svolgere sono salvare i nuovi abbonamenti alle notifiche push ed eliminare i vecchi abbonamenti. Queste sottoscrizioni ti consentono di inviare messaggi ai client in futuro. Consulta la sezione Iscrivere il cliente alle notifiche push per maggiori dettagli sulla procedura di iscrizione.

Salva le nuove informazioni sull'abbonamento

  1. Fai clic su Registra service worker nella scheda dell'app. Nella casella di stato dovresti vedere un messaggio simile a questo:
Service worker registered. Scope: https://example.com
  1. Nella scheda dell'app, fai clic su Iscriviti alle notifiche push. Il browser o il sistema operativo probabilmente ti chiederà se vuoi consentire al sito web di inviarti notifiche push. Fai clic su Consenti (o su una frase equivalente utilizzata dal browser/sistema operativo). Nella casella di stato dovresti vedere un messaggio simile a questo:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Apri il terminale per visualizzare i log. Dovresti vedere /add-subscription seguito da alcuni dati. /add-subscription è l'URL a cui il client invia una richiesta POST quando vuole iscriversi alle notifiche push. I dati che seguono sono le informazioni sull'abbonamento del cliente che devi salvare.
  2. Apri server.js.
  3. Aggiorna la logica del gestore di route /add-subscription con il seguente codice:
app.post('/add-subscription', (request, response) => {   console.log('/add-subscription');   console.log(request.body);   console.log(`Subscribing ${request.body.endpoint}`);   db.get('subscriptions')     .push(request.body)     .write();   response.sendStatus(200); });

Eliminare le vecchie informazioni sull'abbonamento

  1. Torna alla scheda dell'app.
  2. Fai clic su Annulla iscrizione alle notifiche push.
  3. Controlla di nuovo i log. Dovresti visualizzare /remove-subscription seguito dai dati dell'abbonamento del cliente.
  4. Aggiorna la logica del gestore di route /remove-subscription con il seguente codice:
app.post('/remove-subscription', (request, response) => {   console.log('/remove-subscription');   console.log(request.body);   console.log(`Unsubscribing ${request.body.endpoint}`);   db.get('subscriptions')     .remove({endpoint: request.body.endpoint})     .write();   response.sendStatus(200); });

Invia notifiche

Come spiegato in Inviare un messaggio push, il server non invia direttamente i messaggi push ai client. Si basa invece su un servizio push. Il tuo server avvia il processo di push dei messaggi ai client effettuando richieste di servizi web (richieste di protocollo push web) a un servizio web (il servizio push) di proprietà del fornitore del browser utilizzato dall'utente.

  1. Aggiorna la logica del gestore di route /notify-me con il seguente codice:
app.post('/notify-me', (request, response) => {   console.log('/notify-me');   console.log(request.body);   console.log(`Notifying ${request.body.endpoint}`);   const subscription =        db.get('subscriptions').find({endpoint: request.body.endpoint}).value();   sendNotifications([subscription]);   response.sendStatus(200); });
  1. Aggiorna la funzione sendNotifications() con il seguente codice:
function sendNotifications(subscriptions) {   // TODO   // Create the notification content.   const notification = JSON.stringify({     title: "Hello, Notifications!",     options: {       body: `ID: ${Math.floor(Math.random() * 100)}`     }   });   // Customize how the push service should attempt to deliver the push message.   // And provide authentication information.   const options = {     TTL: 10000,     vapidDetails: vapidDetails   };   // Send a push message to each client specified in the subscriptions array.   subscriptions.forEach(subscription => {     const endpoint = subscription.endpoint;     const id = endpoint.substr((endpoint.length - 8), endpoint.length);     webpush.sendNotification(subscription, notification, options)       .then(result => {         console.log(`Endpoint ID: ${id}`);         console.log(`Result: ${result.statusCode}`);       })       .catch(error => {         console.log(`Endpoint ID: ${id}`);         console.log(`Error: ${error} `);       });   }); }
  1. Aggiorna la logica del gestore di route /notify-all con il seguente codice:
app.post('/notify-all', (request, response) => {   console.log('/notify-all');   response.sendStatus(200);   console.log('Notifying all subscribers');   const subscriptions =       db.get('subscriptions').cloneDeep().value();   if (subscriptions.length > 0) {     sendNotifications(subscriptions);     response.sendStatus(200);   } else {     response.sendStatus(409);   } });
  1. Torna alla scheda dell'app.
  2. Fai clic su Avvisami. Dovresti ricevere una notifica push. Il titolo deve essere Hello, Notifications! e il corpo deve essere ID: <ID>, dove <ID> è un numero casuale.
  3. Apri l'app su altri browser o dispositivi e prova a iscriverli alle notifiche push e poi fai clic sul pulsante Notifica a tutti. Dovresti ricevere la stessa notifica su tutti i tuoi dispositivi a cui hai eseguito la sottoscrizione (ovvero l'ID nel corpo della notifica push dovrebbe essere lo stesso).

Passaggi successivi

  • Leggi la panoramica delle notifiche push per una comprensione concettuale più approfondita del funzionamento delle notifiche push.
  • Consulta Codelab: Build a push notification client per scoprire come creare un client che richieda l'autorizzazione per le notifiche, iscriva il dispositivo alla ricezione di notifiche push e utilizzi un service worker per ricevere messaggi push e visualizzarli come notifiche.