Codelab: Push-Benachrichtigungsserver erstellen

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

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

  • Verfolgt Push-Benachrichtigungsabos (d.h., der Server erstellt einen neuen Datenbankeintrag, wenn ein Client Push-Benachrichtigungen aktiviert, und löscht einen vorhandenen Datenbankeintrag, wenn ein Client Push-Benachrichtigungen deaktiviert)
  • Sendet eine Push-Benachrichtigung an einen einzelnen Client
  • Sendet eine Push-Benachrichtigung an alle abonnierten Clients

In diesem Codelab geht es darum, dass Sie durch praktische Übungen lernen. Konzepte werden nur wenig behandelt. Weitere Informationen zu Push-Benachrichtigungen finden Sie unter Wie funktionieren Push-Benachrichtigungen?.

Der Clientcode dieses Codelabs ist bereits vollständig. In diesem Codelab implementieren Sie nur den Server. Informationen zum Implementieren eines Push-Benachrichtigungsclients finden Sie im Codelab: Build a push notification client.

Browserkompatibilität

Dieses Codelab funktioniert mit den folgenden Kombinationen aus Betriebssystem und Browser:

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

Dieses Codelab funktioniert nicht mit den folgenden Betriebssystemen (oder Betriebssystem- und Browserkombinationen):

  • macOS: Brave, Edge, Safari
  • iOS

Anwendungs-Stack

  • Der Server basiert auf Express.js.
  • Die web-push-Node.js-Bibliothek übernimmt die gesamte Push-Benachrichtigungslogik.
  • Abonnementdaten 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 ein zuverlässiges Codelab ermöglichen.

Einrichtung

Authentifizierung einrichten

Bevor Push-Benachrichtigungen funktionieren, müssen Sie Ihren Server und Client mit Authentifizierungsschlüsseln einrichten. Weitere Informationen finden Sie unter Web-Push-Protokollanfragen signieren.

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

Abos verwalten

Ihr Client übernimmt den Großteil des Abovorgangs. Ihr Server muss hauptsächlich neue Push-Benachrichtigungsabos speichern und alte Abos löschen. Diese Abos ermöglichen es Ihnen, in Zukunft Nachrichten an Clients zu senden. Weitere Informationen zum Abo-Prozess finden Sie unter Client für Push-Benachrichtigungen abonnieren.

Neue Aboinformationen speichern

  1. Klicken Sie auf dem App-Tab auf Service Worker registrieren. Im Statusfeld sollte eine Meldung ähnlich der folgenden angezeigt werden:
Service worker registered. Scope: https://example.com
  1. Klicken Sie auf dem App-Tab auf Push-Benachrichtigungen abonnieren. Ihr Browser oder Betriebssystem fragt Sie wahrscheinlich, ob Sie der Website erlauben möchten, Ihnen Push-Benachrichtigungen zu senden. Klicken Sie auf Zulassen (oder die entsprechende Formulierung, die in Ihrem Browser/Betriebssystem verwendet wird). Im Statusfeld sollte eine Meldung ähnlich der folgenden angezeigt werden:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Öffnen Sie das Terminal, um die Logs zu sehen. Sie sollten /add-subscription gefolgt von einigen Daten sehen. /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.
  2. Öffnen Sie server.js.
  3. Aktualisieren Sie die Logik des /add-subscription-Routen-Handlers 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. Kehren Sie zum App-Tab zurück.
  2. Klicken Sie auf Push-Benachrichtigungen deaktivieren.
  3. Sehen Sie sich die Logs noch einmal an. Sie sollten /remove-subscription gefolgt von den Aboinformationen des Kunden sehen.
  4. Aktualisieren Sie die Logik des /remove-subscription-Routen-Handlers 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 beschrieben, werden Push-Nachrichten nicht direkt von Ihrem Server an Clients gesendet. Stattdessen wird ein Push-Dienst verwendet. Ihr Server startet im Grunde nur den Prozess des Push-Nachrichtensendens an Clients, indem er Webdienst-Anfragen (Web-Push-Protokollanfragen) an einen Webdienst (den Push-Dienst) sendet, der dem Browseranbieter gehört, den Ihr Nutzer verwendet.

  1. Aktualisieren Sie die Logik des /notify-me-Routen-Handlers 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 Logik des /notify-all-Routen-Handlers 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 App-Tab zurück.
  2. Klicken Sie auf Benachrichtigen. Sie sollten eine Push-Benachrichtigung erhalten. Der Titel sollte Hello, Notifications! und der Textkörper ID: <ID> sein, wobei <ID> eine zufällige Zahl ist.
  3. Öffnen Sie Ihre App in anderen Browsern oder auf anderen Geräten und versuchen Sie, Push-Benachrichtigungen 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

  • Weitere Informationen zur Funktionsweise von Push-Benachrichtigungen finden Sie unter Push-Benachrichtigungen – Übersicht.
  • Im Codelab: Build a push notification client (Codelab: Push-Benachrichtigungsclient erstellen) erfahren Sie, wie Sie einen Client erstellen, der die Berechtigung für Benachrichtigungen anfordert, das Gerät für den Empfang von Push-Benachrichtigungen registriert und einen Service Worker verwendet, um Push-Nachrichten zu empfangen und als Benachrichtigungen anzuzeigen.