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 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 sull'aiutarti ad apprendere facendo e non parlano molto dei concetti. Paga Come funzionano le notifiche push? per saperne di più sui concetti delle notifiche push.

Il codice client di questo codelab è già completo. Sarai a implementare il server in questo codelab. Per scoprire come implementare una client di notifica push, dai un'occhiata a Codelab: Creare una notifica push Google Cloud.

Consulta 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 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

Ottieni una copia modificabile del codice

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

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

Configura l'autenticazione

Per far funzionare le notifiche push, devi prima configurare il tuo server e il tuo client con chiavi di autenticazione. Consulta Firmare le richieste di protocollo push web. per scoprire perché.

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 Da VAPID_SUBJECT a mailto:[e-mail]. Tutti questi valori devono essere aggregati tra virgolette. Dopo aver apportato gli aggiornamenti, il file .env dovrebbe avere un aspetto in modo simile a questo:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. Chiudi il terminale Glitch.

di Gemini Advanced.

I valori della variabile 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. Il principale il server deve salvare nuove iscrizioni alle notifiche push ed eliminare gli abbonamenti precedenti. Questi abbonamenti ti consentono di i messaggi push per i client in futuro. Fai riferimento a Iscriversi al client per le notifiche push. per ulteriori informazioni sulla procedura di abbonamento.

Salva le nuove informazioni sull'abbonamento

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

di Gemini Advanced.

Termine chiave: faremo riferimento 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 dovrebbe essere visualizzato 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. È probabile che il browser o il sistema operativo ti verrà chiesto se vuoi che il sito web ti invii notifiche push. Fai clic su Consenti (o su un'altra opzione) la 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 in base al 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. Tu dovrebbe vedere /add-subscription seguito da alcuni dati. /add-subscription è l'URL che il client invia PUBBLICA a quando desidera iscriversi alle notifiche push. I dati che vengono visualizzate 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, quindi esegui cat .data/db.json nel terminale. L'elemento .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 la tua app e lo 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 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 tuo server non invia effettivamente i messaggi push direttamente ai client. Si basa piuttosto su un servizio push per farlo. Il tuo server fondamentalmente avvia il processo di push dei messaggi ai clienti rendendo richieste di servizio (richieste di protocollo push web) a un servizio web (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 la tua app su altri browser o dispositivi e prova a iscriverli alle notifiche push e facendo clic sul pulsante Invia notifica a tutti. Dovresti ricevere la stessa notifica su su tutti i dispositivi a cui hai sottoscritto l'abbonamento (ovvero l'ID nel corpo della notifica push deve rimangono invariati).

Passaggi successivi

• Leggi la panoramica sulle 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, si abbona il dispositivo per ricevere notifiche push e utilizza un service worker per ricevere e visualizzare i messaggi come notifiche.