Questa pagina è stata tradotta dall'API Cloud Translation.

Codelab: creare un server di notifica push

Kate Jeffreys

Kayce Basques

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 (ad es.il server crea un nuovo record di database quando un cliente attiva le notifiche push ed elimina un record di database esistente quando un cliente disattiva questa opzione).
Invia una notifica push a un singolo client
Invia una notifica push a tutti i client iscritti

Questo codelab è incentrato sull'apprendimento pratico e non discute molto i concetti. Consulta l'articolo Come funzionano le notifiche push? per saperne di più sui concetti di 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 il codelab Crea un client di notifiche push.

Consulta push-notifications-server-codelab-complete (source) per visualizzare il codice completo.

Compatibilità del browser

Questo codelab è noto per funzionare 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 di notifica 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.

Configurazione

Ottenere una copia modificabile del codice

L'editor di codice che vedi a destra di queste istruzioni verrà chiamato interfaccia utente Glitch per tutto il codelab.

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

Configura l'autenticazione

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

Apri il terminale di Glitch facendo clic su Strumenti e poi su Terminale.
Nel terminale, esegui npx web-push generate-vapid-keys. Copia i valori della chiave privata e della chiave pubblica.
Apri .env e aggiorna VAPID_PUBLIC_KEY e VAPID_PRIVATE_KEY. Imposta VAPID_SUBJECT su mailto:test@test.test. Tutti questi valori devono essere racchiusi tra virgolette doppie. Dopo aver apportato gli aggiornamenti, il file .env dovrebbe avere un aspetto simile al seguente:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

Chiudi il terminale Glitch.

I valori delle variabili di ambiente (gli elementi in .env) sono univoci per un singolo progetto Glitch. Se remixi il progetto, i valori in .env non verranno copiati.

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

Gestisci sottoscrizioni

Il cliente gestisce la maggior parte della procedura di abbonamento. Le operazioni principali che il server deve svolgere sono salvare le nuove iscrizioni alle notifiche push ed eliminare quelle precedenti. Queste sottoscrizioni ti consentono di eseguire il push dei messaggi ai client in futuro. Per ulteriori informazioni sulla procedura di sottoscrizione, consulta la sezione Registrare il cliente alle notifiche push.

Salva le nuove informazioni sull'abbonamento

Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi A schermo intero .

Fai clic su Registra service worker nella scheda dell'app. Nella finestra di stato dovresti vedere un messaggio simile al seguente:

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

Nella scheda dell'app, fai clic su Iscriviti per ricevere notifiche push. Probabilmente il browser o il 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/dal sistema operativo). Nella casella dello stato dovresti vedere un messaggio simile al seguente:

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/….

Torna al codice facendo clic su Visualizza codice sorgente nell'interfaccia utente di Glitch.
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 alle notifiche push. I dati che seguono sono le informazioni sull'abbonamento del cliente che devi salvare.
Apri server.js.
Aggiorna la logica dell'handler 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 ispezionare questo file in Glitch, fai clic su Strumenti, poi su Terminale ed esegui cat .data/db.json nel terminale. .data/db.json viene eliminato ogni volta che modifichi l'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

Torna alla scheda dell'app.
Fai clic su Annulla l'iscrizione alle notifiche push.
Esamina di nuovo i log degli errori. Dovresti vedere /remove-subscription seguito dai dati dell'abbonamento del cliente.
Aggiorna la logica dell'handler 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);
});

Inviare notifiche

Come spiegato nella sezione Inviare un messaggio push, il server non invia effettivamente i messaggi push direttamente ai client. ma si basa su un servizio push. In pratica, il server avvia il processo di invio dei messaggi ai client inviando richieste di servizio web (richieste di protocollo push web) a un servizio web (il servizio push) di proprietà del fornitore del browser utilizzato dall'utente.

Aggiorna la logica dell'handler 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);
});

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} `);
      });
  });
}

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);
  }
});

Torna alla scheda dell'app.
Fai clic su Annulla iscrizione alle notifiche push e poi di nuovo su Iscriviti alle notifiche push. Questo è necessario 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.
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 random.
Apri l'app su altri browser o dispositivi e prova a iscriverli alle notifiche push, quindi fai clic sul pulsante Avvisa tutti. Dovresti ricevere la stessa notifica su tutti i dispositivi su cui hai effettuato l'iscrizione (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 il Codelab: crea un client di notifiche push per scoprire come creare un client che richieda l'autorizzazione di notifica, registri il dispositivo per ricevere notifiche push e utilizzi un service worker per ricevere i messaggi push e visualizzarli come notifiche.