Codelab: Push-Benachrichtigungsserver erstellen

Kate Jeffreys
Kate Jeffreys
Kayce Basques

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

  • Erfasst Push-Benachrichtigungsabonnements.Das bedeutet, dass der Server einen neuen Datenbankeintrag erstellt, wenn ein Client Push-Benachrichtigungen aktiviert, und einen vorhandenen Datenbankeintrag löscht, 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, durch praktisches Tun zu lernen. Konzepte werden nur am Rande behandelt. Unter Wie funktionieren Push-Benachrichtigungen? finden Sie weitere Informationen zu Push-Benachrichtigungen.

Der Clientcode für dieses Codelab ist bereits fertig. In diesem Codelab implementieren Sie nur den Server. 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

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

  • macOS: Brave, Edge, Safari
  • iOS

Anwendungspaket

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

Sie müssen keine dieser Technologien verwenden, um Push-Benachrichtigungen zu implementieren. Wir haben diese Technologien ausgewählt, weil sie eine zuverlässige Codelab-Umgebung 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 Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.

Authentifizierung einrichten

Bevor Sie Push-Benachrichtigungen verwenden können, 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. Ö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 Aktualisierungen vorgenommen haben, sollte die Datei .env 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

Dein Kunde übernimmt den Großteil des Aboprozesses. Ihr Server muss vor allem neue Push-Benachrichtigungsabos speichern und alte Abos löschen. Über diese Abos können Sie in Zukunft Nachrichten an Clients senden. Weitere Informationen zum Aboprozess findest du unter Client für Push-Benachrichtigungen registrieren.

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 Tab „App“ auf Dienstworker 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 Tab „App“ auf Push-Benachrichtigungen abonnieren. Ihr Browser oder Betriebssystem wird Sie wahrscheinlich fragen, ob Sie der Website erlauben möchten, Ihnen Push-Benachrichtigungen zu senden. Klicken Sie auf Zulassen (oder auf die entsprechende Option in Ihrem Browser/Betriebssystem). Im Statusfeld sollte eine Meldung wie die folgende angezeigt werden:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Klicken Sie in der Glitch-Benutzeroberfläche auf Quellcode ansehen, um zum Code zurückzukehren.
  2. Öffne die Glitch-Protokolle, indem du auf Tools und dann auf Protokolle klickst. 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 du speichern musst.
  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 Tab „App“ zurück.
  2. Klicken Sie auf Push-Benachrichtigungen deaktivieren.
  3. Sehen Sie sich die Glitch-Protokolle noch einmal an. Du solltest /remove-subscription und dann die 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 im Hilfeartikel Push-Nachricht senden erläutert, sendet Ihr Server die Push-Nachrichten nicht direkt an die Clients. Stattdessen wird ein Push-Dienst verwendet. Ihr Server startet im Grunde nur den Prozess zum Senden von Nachrichten an Clients, indem er Webanfrageanfragen (Web Push Protocol-Anfragen) 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 sendNotifications()-Funktion 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 Tab „App“ zurück.
  2. Klicken Sie auf Push-Benachrichtigungen deaktivieren und dann noch einmal auf Push-Benachrichtigungen aktivieren. Das ist nur notwendig, weil Glitch das Projekt 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 Mich benachrichtigen. Sie sollten eine Push-Benachrichtigung erhalten. Der Titel sollte Hello, Notifications! und der Textkörper ID: <ID> sein, wobei <ID> eine Zufallszahl ist.
  4. Öffnen Sie Ihre App in anderen Browsern oder auf anderen Geräten und versuchen Sie, sich für Push-Benachrichtigungen anzumelden und dann auf die Schaltfläche Alle benachrichtigen zu klicken. Sie sollten dieselbe Benachrichtigung auf allen abonnierten Geräten erhalten. Das heißt, die ID im Text der Push-Benachrichtigung sollte dieselbe sein.

Nächste Schritte