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 Codelab haben Sie einen Server, der:

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

In diesem Codelab erfahren Sie, wie Sie lernen, indem Sie wird viel über Konzepte gesprochen. Zur Kasse Wie funktionieren Push-Benachrichtigungen? um mehr über die Konzepte von Push-Benachrichtigungen zu erfahren.

Der Clientcode für dieses Codelab ist bereits fertig. Sie werden nur Implementierung des Servers in diesem Codelab. Um zu erfahren, wie Sie eine Push-Benachrichtigungs-Client, siehe Codelab: Push-Benachrichtigungen erstellen Kunde.

Dann probieren Sie push-notifications-server-codelab-complete aus. (Quelle) um den vollständigen Code zu sehen.

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 Betriebssystem und Browser):

  • macOS: Brave, Edge, Safari
  • iOS

Anwendungspaket

  • Der Server basiert auf Express.js.
  • web-push-Node.js-Bibliothek die gesamte Push-Benachrichtigungslogik verarbeitet.
  • 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 diesen Anweisungen sehen, wird als Glitch-UI in diesem Codelab ausführen.

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

Authentifizierung einrichten

Bevor du Push-Benachrichtigungen erhalten kannst, musst du Ihrem Server und Client mit Authentifizierungsschlüsseln. Weitere Informationen finden Sie unter Web-Push-Protokollanfragen signieren. um mehr über die Gründe zu erfahren.

  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. Privaten Schlüssel kopieren und öffentlichen Schlüsselwerten.
  3. Öffne .env und aktualisiere VAPID_PUBLIC_KEY und VAPID_PRIVATE_KEY. Festlegen VAPID_SUBJECT in mailto:test@test.test. Alle diese Werte sollten umschlossen in doppelte Anführungszeichen gesetzt. Nachdem Sie die Änderungen vorgenommen haben, sollte die Datei .env wie folgt aussehen: etwa so:
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. Die wichtigsten Ihr Server muss nun neue Abos für Push-Benachrichtigungen speichern. und löschen Sie alte Abos. Mit diesen Abos können Sie Nachrichten an die Kundschaft zu senden. Siehe 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. Drücken Sie dann Vollbild Vollbild
  1. Klicken Sie auf dem App-Tab auf Service Worker registrieren. Im Statusfeld können Sie 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 wahrscheinlich werden Sie gefragt, ob die Website Ihnen Push-Benachrichtigungen senden darf. Klicken Sie auf Zulassen oder die in Ihrem Browser/Betriebssystem verwendet wird. Im Statusfeld sollte eine Meldung wie die in:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  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. Ich sollten /add-subscription gefolgt von einigen Daten angezeigt werden. /add-subscription ist Die URL, die vom Client eine POSTEN wann Push-Benachrichtigungen abonniert werden sollen. Die Daten, die 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);
});

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. Du solltest sehen, dass /remove-subscription gefolgt wird Aboinformationen des Kunden.
  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-Nachrichten senden erläutert, sendet Ihr Server die Push-Nachrichten nicht direkt an die Clients. Stattdessen wird dafür ein Push-Dienst genutzt. Ihr Server ist im Grunde der Prozess, Nachrichten an die Kunden zu übermitteln, indem Dienstanfragen (Web-Push-Protokollanfragen) an einen Webdienst (Push-Dienst) dem Browseranbieter gehört, den der 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. Das ist nur notwendig, weil wie bereits erwähnt, dass Glitch das Projekt neu startet. jedes Mal, 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 sollte ID: <ID> sein, wobei <ID> ein Zufallszahl.
  4. Öffne deine App in anderen Browsern oder auf anderen Geräten und versuche, sie für Push-Benachrichtigungen zu abonnieren und dann auf die Schaltfläche Alle benachrichtigen. Die gleiche Benachrichtigung erhalten Sie (d.h. die ID im Text der Push-Benachrichtigung sollte gleich sein).

Nächste Schritte