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 sie 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 kaum 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.

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

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

Bearbeitbare Kopie des Codes erhalten

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

  1. Klicken Sie auf Remix to Edit (Remix zum Bearbeiten), um das Projekt bearbeitbar zu machen.

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 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 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. Schließen Sie 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 Client ü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 an Clients senden. Weitere Informationen zum Abo-Prozess finden Sie unter Client für Push-Benachrichtigungen abonnieren.

Neue Aboinformationen speichern

  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.
  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://desert-cactus-sunset.glitch.me/
  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. Klicken Sie in der Glitch-Benutzeroberfläche auf View Source (Quelle ansehen), um zu Ihrem Code zurückzukehren.
  2. Öffnen Sie die Glitch-Logs, indem Sie auf Tools und dann auf Logs klicken. 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.
  3. Öffnen Sie server.js.
  4. 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 Glitch-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 Push-Benachrichtigungen abbestellen und dann noch einmal auf Push-Benachrichtigungen abonnieren. Das 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 Textkörper ID: <ID> sein, wobei <ID> eine zufällige Zahl ist.
  4. Ö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.