Codelab: Push-Benachrichtigungsserver erstellen

Kate Jeffreys
Kate Jeffreys
Kayce Basken

In diesem Codelab wird Schritt für Schritt gezeigt, wie Sie einen Push-Benachrichtigungsserver erstellen. Am Ende des Codelab haben Sie einen Server,

  • Überwacht Abos von Push-Benachrichtigungen (d. h., der Server erstellt einen neuen Datenbankeintrag, wenn ein Client Push-Benachrichtigungen zustimmt, und löscht einen vorhandenen Datenbankeintrag, wenn ein Client dies tut).
  • Sendet eine Push-Benachrichtigung an einen einzelnen Client
  • Sendet eine Push-Benachrichtigung an alle abonnierten Clients

In diesem Codelab geht es um das Lernen durch Ausprobieren. Es werden nicht viel über Konzepte gesprochen. Lesen Sie Wie funktionieren Push-Benachrichtigungen?, um mehr über die Konzepte von Push-Benachrichtigungen zu erfahren.

Der Clientcode dieses Codelab ist bereits vollständig. Den Server implementieren Sie nur in diesem Codelab. Wie Sie einen Client für Push-Benachrichtigungen implementieren, erfahren Sie im Artikel Codelab: Push-Benachrichtigungsclient erstellen.

Den vollständigen Code finden Sie unter push-notifications-server-codelab-complete (Quelle).

Browserkompatibilität

Dieses Codelab funktioniert bekanntermaßen mit den folgenden Kombinationen aus Betriebssystemen und Browsern:

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

Dieses Codelab funktioniert bekanntermaßen nicht mit den folgenden Betriebssystemen (oder Kombinationen aus Betriebssystemen und Browser):

  • macOS: Brave, Edge, Safari
  • iOS

Anwendungspaket

  • Der Server basiert auf Express.js.
  • Die web-push-Node.js-Bibliothek verarbeitet die gesamte Push-Benachrichtigungslogik.
  • Abodaten werden mit lowdb in eine JSON-Datei geschrieben.

Sie müssen keine dieser Technologien verwenden, um Push-Benachrichtigungen zu implementieren. Wir haben uns für diese Technologien entschieden, weil sie eine zuverlässige Codelab-Erfahrung bieten.

Einrichtung

Bearbeitbare Kopie des Codes abrufen

Der Code-Editor, den Sie rechts neben dieser Anleitung sehen, wird in diesem Codelab als Glitch UI bezeichnet.

  1. Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.

Authentifizierung einrichten

Bevor Sie Push-Benachrichtigungen erhalten können, müssen Sie Ihren Server und Ihren Client mit Authentifizierungsschlüsseln einrichten. Informationen zu den Gründen findest du unter Web-Push-Protokollanfragen signieren.

  1. Öffnen Sie das Glitch-Terminal, indem Sie auf Tools und dann auf Terminal klicken.
  2. Führen Sie im Terminal npx web-push generate-vapid-keys aus. Kopieren Sie den privaten Schlüssel und die Werte des öffentlichen Schlüssels.
  3. Öffne .env und aktualisiere VAPID_PUBLIC_KEY und VAPID_PRIVATE_KEY. Legen Sie VAPID_SUBJECT auf mailto:test@test.test fest. Alle diese Werte müssen in doppelte Anführungszeichen gesetzt werden. Nachdem Sie die Änderungen vorgenommen haben, sollte Ihre .env-Datei in etwa so aussehen:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Schließe das Glitch-Terminal.
  1. Öffnen Sie public/index.js.
  2. Ersetzen Sie VAPID_PUBLIC_KEY_VALUE_HERE durch den Wert Ihres öffentlichen Schlüssels.

Abos verwalten

Ihr Kunde übernimmt den Großteil des Abovorgangs. Der Server muss vor allem neue Abos für Push-Benachrichtigungen speichern und alte Abos löschen. Mithilfe dieser Abos können Sie in Zukunft Nachrichten an Clients senden. Weitere Informationen zum Abovorgang findest du unter Push-Benachrichtigungen für den Client abonnieren.

Neue Aboinformationen speichern

  1. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.
  1. Klicken Sie auf dem App-Tab auf Service Worker registrieren. Im Statusfeld sollte eine Meldung wie diese angezeigt werden:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. Klicken Sie im App-Tab auf Abonnieren, um Push zu senden. Ihr Browser oder Betriebssystem wird Sie wahrscheinlich fragen, ob Sie Push-Benachrichtigungen von der Website zulassen möchten. Klicken Sie auf Zulassen oder auf die entsprechende Option, die Ihr Browser bzw. Betriebssystem verwendet. Im Statusfeld sollte eine Meldung wie die folgende angezeigt werden:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Kehre zu deinem Code zurück, indem du in der Glitch-Benutzeroberfläche auf View Source (Quelle anzeigen) klickst.
  2. Öffnen Sie die Glitch-Protokolle, indem Sie auf Tools und dann auf Logs klicken. Es sollte /add-subscription gefolgt von einigen Daten angezeigt werden. /add-subscription ist die URL, an die der Client eine POST-Anfrage sendet, um Push-Benachrichtigungen zu abonnieren. Die folgenden Daten sind die Aboinformationen des Clients, die Sie speichern müssen.
  3. Öffnen Sie server.js.
  4. Aktualisieren Sie die Routen-Handler-Logik /add-subscription mit dem folgenden Code:
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);
});

Alte Aboinformationen löschen

  1. Gehen Sie zurück zum Tab „App“.
  2. Klicken Sie auf Push-Benachrichtigungen abbestellen.
  3. Sieh dir noch einmal die Glitch-Protokolle an. Es sollte /remove-subscription gefolgt von den Aboinformationen des Clients angezeigt werden.
  4. Aktualisieren Sie die Routen-Handler-Logik /remove-subscription mit dem folgenden Code:
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);
});

Benachrichtigungen senden

Wie unter Push-Nachricht senden erläutert, sendet Ihr Server die Push-Nachrichten nicht direkt an Clients. Dafür wird stattdessen ein Push-Dienst benötigt. Ihr Server startet im Grunde einfach den Prozess, mit dem Nachrichten an Clients gesendet werden. Dazu sendet er Webdienstanfragen (Web-Push-Protokoll-Anfragen) an einen Webdienst (Push-Dienst), der dem von Ihrem Nutzer verwendeten Browseranbieter gehört.

  1. Aktualisieren Sie die Routen-Handler-Logik /notify-me mit dem folgenden Code:
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. Aktualisieren Sie die Funktion sendNotifications() mit dem folgenden Code:
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. Aktualisieren Sie die Routen-Handler-Logik /notify-all mit dem folgenden Code:
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. Gehen Sie zurück zum Tab „App“.
  2. Klicken Sie auf Push-Benachrichtigungen abbestellen und dann noch einmal auf Abonnieren für Push. Dies ist nur erforderlich, da wie bereits erwähnt, dass Glitch das Projekt jedes Mal neu startet, wenn du den Code bearbeitest und das Projekt so konfiguriert ist, dass die Datenbank beim Start gelöscht wird.
  3. Klicken Sie auf Benachrichtigen. Sie sollten eine Push-Benachrichtigung erhalten. Der Titel sollte Hello, Notifications! und der Text ID: <ID> sein, wobei <ID> eine Zufallszahl ist.
  4. Öffnen Sie Ihre App in anderen Browsern oder auf anderen Geräten, abonnieren Sie Push-Benachrichtigungen und klicken Sie dann auf die Schaltfläche Alle benachrichtigen. Du solltest auf allen deinen abonnierten Geräten dieselbe Benachrichtigung erhalten (d.h., die ID im Text der Push-Benachrichtigung sollte dieselbe sein).

Weitere Informationen

  • Unter Push-Benachrichtigungen – Übersicht erhältst du ein tieferes Verständnis der Funktionsweise von Push-Benachrichtigungen.
  • In Codelab: Client für Push-Benachrichtigungen erstellen erfahren Sie, wie Sie einen Client erstellen, der die Berechtigung zum Senden von Benachrichtigungen anfordert, das Gerät für den Empfang von Push-Benachrichtigungen abonniert und einen Service Worker verwendet, um Push-Nachrichten zu empfangen und die Nachrichten als Benachrichtigungen anzuzeigen.