Codelab: creare un server di notifica push

Kate Jeffreys

Kayce Basques

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

Questo codelab ti mostra, passo passo, come creare un server di notifiche push. Alla fine 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 disattiva)
• Invia una notifica push a un singolo client
• Invia una notifica push a tutti i clienti iscritti

Questo codelab è incentrato su come imparare con la pratica e non parla molto di concetti. Consulta Come funzionano le notifiche push? per scoprire di più sui concetti relativi alle notifiche push.

Il codice client di questo codelab è già completo. Implementerai il server solo in questo codelab. Per scoprire come implementare un client delle notifiche push, consulta Codelab: Creare un client per le notifiche push.

Dai un'occhiata a push-notifications-server-codelab-complete (fonte) per visualizzare 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 tutte la logica delle notifiche push.
• I dati di abbonamento 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.

Imposta

Ottieni una copia modificabile del codice

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

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

Configura l'autenticazione

Prima di poter attivare le notifiche push, devi configurare il server e il client con le chiavi di autenticazione. Per ulteriori informazioni, consulta Firmare le richieste di protocollo push web.

1. Apri il terminale Glitch facendo clic su Strumenti, quindi su Terminale.
2. Nel terminale, esegui npx web-push generate-vapid-keys. Copia la chiave privata e le coppie chiave-valore 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. 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 (gli elementi in .env) sono univoci per un singolo progetto Glitch. Se fai il remix del 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 tuo client gestisce la maggior parte del processo di abbonamento. Le operazioni principali che il server deve eseguire sono salvare le nuove iscrizioni alle notifiche push ed eliminare le vecchie sottoscrizioni. Queste sottoscrizioni ti consentono di eseguire il push dei messaggi ai client in futuro. Consulta Iscrivere il client alle notifiche push per ulteriori informazioni sul processo di abbonamento.

Salva le nuove informazioni sull'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 dello stato dovresti vedere un messaggio simile al seguente:

Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/

1. Nella scheda dell'app, fai clic su Abbonati per push. Il tuo browser o sistema operativo ti chiederà probabilmente se vuoi consentire al sito web di inviarti notifiche push. Fai clic su Consenti (o qualsiasi frase equivalente utilizzata dal browser o dal sistema operativo). Nella casella dello 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 in uso. Ad esempio, su Firefox, l'URL inizia con https://updates.push.services.mozilla.com/….

1. Torna al codice facendo clic su Visualizza sorgente nella UI di Glitch.
2. Apri I log di Glitch facendo clic su Strumenti, 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 per le notifiche push. I dati che seguono sono le informazioni sull'abbonamento del cliente 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, quindi 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 l'app e questo script include una chiamata a rm .data/db.json.

Elimina le informazioni dell'abbonamento precedenti

1. Torna alla scheda dell'app.
2. Fai clic su Annulla iscrizione alle notifiche push.
3. Guarda di nuovo i registri Glitch. Dovresti vedere /remove-subscription seguito dalle informazioni sull'abbonamento del client.
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. Si basa piuttosto su un servizio push per farlo. In sostanza, il server avvia il processo di push dei messaggi ai client inviando 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 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 al push, quindi fai di nuovo clic su Abbonati al push. Questa operazione è necessaria solo perché, come accennato in precedenza, 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 iscriverli alle notifiche push, quindi fai clic sul pulsante Invia notifiche a tutti. Dovresti ricevere la stessa notifica su tutti i dispositivi per cui hai sottoscritto un abbonamento (ad esempio, l'ID nel corpo della notifica push deve essere lo stesso).

Passaggi successivi

• Leggi Panoramica delle notifiche push per una comprensione concettuale più approfondita di come funzionano le notifiche push.
• Consulta Codelab: Creare un client per le 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 visualizzare i messaggi come notifiche.