Codelab: Push-Benachrichtigungsserver erstellen

Kate Jeffreys

Kayce Basques

Öffne diesen Glitch in einem zweiten Tab, um dem Codelab zu folgen.

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

• Verfolgt die Abonnements 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 sich deaktiviert)
• Sendet eine Push-Benachrichtigung an einen einzelnen Client
• Sendet eine Push-Benachrichtigung an alle abonnierten Clients

Dieses Codelab soll Ihnen beim Lernen helfen. Es werden dabei nur wenige Konzepte behandelt. Unter Wie funktionieren Push-Benachrichtigungen? finden Sie Informationen zu den Konzepten von Push-Benachrichtigungen.

Der Clientcode für dieses Codelab ist bereits fertig. Sie implementieren den Server nur in diesem Codelab. Informationen zum Implementieren eines Push-Benachrichtigungsclients finden Sie in Codelab: Client für Push-Benachrichtigungen 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

Es ist bekannt, dass dieses Codelab mit den folgenden Betriebssystemen (oder Kombinationen aus Betriebssystem und Browser) nicht funktioniert:

• macOS: Brave, Edge, Safari
• iOS

Anwendungspaket

• Der Server basiert auf Express.js.
• Die Node.js-Bibliothek web-push steuert 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 Codeeditor, den Sie rechts neben dieser Anleitung sehen, wird in diesem Codelab als Glitch-UI bezeichnet.

1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.

Authentifizierung einrichten

Bevor Sie Push-Benachrichtigungen erhalten, müssen Sie Ihren Server und Client mit Authentifizierungsschlüsseln einrichten. Informationen zu den Gründen finden Sie 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 die Werte des privaten und des öffentlichen Schlüssels.
3. Öffne .env und aktualisiere VAPID_PUBLIC_KEY und VAPID_PRIVATE_KEY. Legen Sie VAPID_SUBJECT auf mailto:[e-mail] fest. Alle diese Werte sollten in doppelte Anführungszeichen gesetzt werden. Nachdem Sie die Aktualisierungen vorgenommen haben, sollte die Datei .env in etwa so aussehen:

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

1. Schließe das Glitch-Terminal.

Die Werte der Umgebungsvariablen (in .env) gelten nur für ein einzelnes Glitch-Projekt. Wenn Sie einen Remix Ihres Projekts erstellen, werden die Werte in .env nicht kopiert.

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. Ihr Server muss hauptsächlich neue Push-Benachrichtigungsabos speichern und alte Abos löschen. Mit diesen Abos können Sie in Zukunft Nachrichten per Push an Clients senden. Weitere Informationen zum Abovorgang findest du unter Client für Push-Benachrichtigungen abonnieren.

Informationen zum neuen Abo speichern

1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild .

Schlüsselbegriff : Wir bezeichnen den Tab, den Sie gerade geöffnet haben, als App-Tab.

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 auf dem App-Tab auf Subscribe to push. Ihr Browser oder Betriebssystem wird Sie wahrscheinlich fragen, ob Ihnen die Website Push-Benachrichtigungen senden darf. Klicken Sie auf Zulassen oder die entsprechende Wortgruppe in Ihrem Browser bzw. Betriebssystem. Im Statusfeld sollte eine Meldung ähnlich der folgenden angezeigt werden:

Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

Hinweis : Die Endpunkt-URL ändert sich je nach verwendetem Browser. In Firefox beginnt die URL beispielsweise mit https://updates.push.services.mozilla.com/….

1. Kehren Sie zu Ihrem Code zurück, indem Sie in der Glitch-Benutzeroberfläche auf View Source (Quelle anzeigen) klicken.
2. Öffnen Sie die Glitch-Logs, 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, wenn er Push-Benachrichtigungen abonnieren möchte. Die folgenden Daten sind die Aboinformationen des Kunden, die Sie speichern müssen.
3. Öffnen Sie server.js.
4. Aktualisieren Sie die /add-subscription-Routing-Handler-Logik 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);
});

Hinweis : Die Datenbank schreibt in .data/db.json. Wenn du diese Datei in Glitch prüfen möchtest, klicke auf Tools, dann auf Terminal und führe dann im Terminal cat .data/db.json aus. .data/db.json wird jedes Mal gelöscht, wenn du deine App bearbeitest. Das liegt daran, dass Glitch bei jeder Bearbeitung deiner App das start-Skript in package.json ausführt. Dieses Skript enthält einen Aufruf an rm .data/db.json.

Informationen zu alten Abos löschen

1. Kehren Sie zum Tab „App“ zurück.
2. Klicken Sie auf Push-Abo abbestellen.
3. Sieh dir die Glitch-Protokolle noch einmal an. Sie sollten /remove-subscription gefolgt von den Aboinformationen des Clients sehen.
4. Aktualisieren Sie die /remove-subscription-Routing-Handler-Logik 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. Stattdessen wird dafür ein Push-Dienst genutzt. Ihr Server startet im Grunde einfach den Prozess, Nachrichten per Push an Clients zu senden, indem er Webdienstanfragen (Web-Push-Protokollanfragen) an einen Webdienst (den Push-Dienst) sendet, der dem Browseranbieter gehört, den Ihr Nutzer verwendet.

1. Aktualisieren Sie die /notify-me-Routing-Handler-Logik 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 /notify-all-Routing-Handler-Logik 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. Kehren Sie zum Tab „App“ zurück.
2. Klicken Sie auf Push-Abo abbestellen und dann noch einmal auf Für Push-Benachrichtigungen abonnieren. Dies ist nur erforderlich, weil Glitch das Projekt wie bereits erwähnt jedes Mal neu startet, wenn Sie den Code bearbeiten, 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 und versuchen Sie, Push-Benachrichtigungen für diese Apps zu abonnieren. Klicken Sie dann auf die Schaltfläche Alle benachrichtigen. Sie sollten auf allen Ihren abonnierten Geräten dieselbe Benachrichtigung erhalten. Die ID im Text der Push-Benachrichtigung sollte also dieselbe sein.

Nächste Schritte

• Ein tieferes konzeptionelles Verständnis der Funktionsweise von Push-Benachrichtigungen finden Sie unter Push-Benachrichtigungen – Übersicht.
• In Codelab: Client für Push-Benachrichtigungen erstellen erfahren Sie, wie Sie einen Client erstellen, der Benachrichtigungsberechtigungen 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.