Codelab: creare un server di notifica push

Kate Jeffreys

Kayce Basques

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

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

• Tiene traccia delle iscrizioni alle notifiche push (ad esempio, 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 disattiva)
• Invia una notifica push a un singolo client
• Invia una notifica push a tutti i client iscritti

Questo codelab è pensato per aiutarti a imparare facendo pratica e non parla molto di concetti. Consulta Come funzionano le notifiche push? per informazioni sui concetti delle notifiche push.

Il codice client di questo codelab è già stato completato. Implementerai il server solo in questo codelab. Per informazioni su come implementare un client di notifica push, consulta Codelab: creare un client di notifiche push.

Consulta la pagina push-notifications-server-codelab-complete (fonte) per vedere il codice completo.

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 è necessario utilizzare nessuna di queste tecnologie per implementare le notifiche push. Abbiamo scelto queste tecnologie perché offrono un'esperienza codelab affidabile.

Configurazione

Ottieni una copia modificabile del codice

L'editor di codice che vedi a destra di queste istruzioni sarà denominato UI di Glitch in questo codelab.

1. Fai clic su Remix per modificare per rendere il progetto modificabile.

Configura l'autenticazione

Prima di poter attivare le notifiche push, devi configurare il server e il client con le chiavi di autenticazione. Per scoprire il motivo, consulta l'articolo Firmare le richieste del protocollo web push.

1. Apri il terminale Glitch facendo clic su Strumenti e poi su Terminale.
2. Nel terminale, esegui npx web-push generate-vapid-keys. Copia la chiave privata e i valori delle chiavi pubbliche.
3. Apri .env e aggiorna VAPID_PUBLIC_KEY e VAPID_PRIVATE_KEY. Imposta VAPID_SUBJECT su mailto:[e-mail]. 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:[e-mail]"

1. Chiudi il terminale Glitch.

I valori delle variabili di ambiente (i contenuti in .env) sono univoci per un singolo progetto Glitch. Se esegui il remix del tuo progetto, i valori in .env non verranno copiati.

1. Apri public/index.js.
2. Sostituisci VAPID_PUBLIC_KEY_VALUE_HERE con il valore della tua chiave pubblica.

Gestisci sottoscrizioni

Il cliente gestisce la maggior parte della procedura di abbonamento. Il server deve eseguire principalmente le operazioni di salvataggio delle nuove iscrizioni alle notifiche push e di eliminazione delle vecchie iscrizioni. Queste sottoscrizioni ti consentono di inviare messaggi ai client in futuro. Per ulteriori informazioni sul processo di abbonamento, consulta Iscrivere il client alle notifiche push.

Salvare le informazioni del nuovo abbonamento

1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .

Termine chiave: ci riferiremo alla scheda che hai appena aperto come scheda dell'app.

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://desert-cactus-sunset.glitch.me/

1. Nella scheda dell'app, fai clic su Iscriviti per inviare push. Il tuo browser o sistema operativo ti chiederà se vuoi consentire al sito web di inviarti notifiche push. Fai clic su Consenti (o su qualsiasi 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/…

Nota: l'URL dell'endpoint cambia a seconda del browser che stai utilizzando. Ad esempio, su Firefox l'URL inizia con https://updates.push.services.mozilla.com/….

1. Torna al codice facendo clic su Visualizza sorgente nell'interfaccia utente di Glitch.
2. Apri i log di Glitch facendo clic su Strumenti e quindi su 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 di seguito sono le informazioni sull'abbonamento del client che devi salvare.
3. Apri server.js.
4. Aggiorna la logica del gestore delle 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);
});

Nota: il database scrive in .data/db.json. Per esaminare questo file in Glitch, fai clic su Strumenti, quindi su Terminale ed esegui cat .data/db.json nel terminale. .data/db.json viene eliminato ogni volta che modifichi la tua app. Questo perché Glitch esegue lo script start in package.json ogni volta che modifichi la tua app e questo script include una chiamata a rm .data/db.json.

Elimina le informazioni sull'abbonamento precedenti

1. Torna alla scheda dell'app.
2. Fai clic su Annulla iscrizione alle notifiche push.
3. Esamina di nuovo i log di Glitch. Dovresti vedere /remove-subscription seguito dalle informazioni sull'abbonamento del cliente.
4. Aggiorna la logica del gestore delle 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 nella sezione Inviare un messaggio push, il server non invia effettivamente i messaggi push direttamente ai client. che si affida piuttosto a un servizio push. In pratica, il server avvia il processo di push dei messaggi ai client inviando richieste di servizio web (richieste di protocollo web push) a un servizio web (il servizio push) di proprietà del fornitore del browser utilizzato dall'utente.

1. Aggiorna la logica del gestore delle 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 delle 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 Annulla iscrizione alle notifiche push, quindi fai di nuovo clic su Iscriviti per inviare le notifiche. Questa operazione è necessaria solo perché, come accennato prima, Glitch riavvia il progetto ogni volta che modifichi il codice e il progetto è configurato per eliminare il database all'avvio.
3. 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.
4. Apri l'app su altri browser o dispositivi, prova a iscriverti alle notifiche push, quindi fai clic sul pulsante Invia notifiche a tutti. Dovresti ricevere la stessa notifica su tutti i dispositivi in abbonamento (ad esempio, l'ID nel corpo della notifica push dovrebbe essere lo stesso).

Passaggi successivi

• Per una comprensione concettuale più approfondita di come funzionano le notifiche push, consulta Panoramica delle notifiche push.
• Consulta Codelab: creare un client di notifiche push per scoprire come creare un client che richiede l'autorizzazione alle notifiche, sottoscrive il dispositivo per ricevere notifiche push e utilizza un service worker per ricevere messaggi push e visualizzarli sotto forma di notifiche.