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.
- 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.
- Öffnen Sie das Glitch-Terminal, indem Sie auf Tools und dann auf Terminal klicken.
- Führen Sie im Terminal
npx web-push generate-vapid-keys
aus. Kopieren Sie die Werte des privaten und des öffentlichen Schlüssels. - Öffne
.env
und aktualisiereVAPID_PUBLIC_KEY
undVAPID_PRIVATE_KEY
. Legen SieVAPID_SUBJECT
aufmailto:test@test.test
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:test@test.test"
- Schließe das Glitch-Terminal.
- Öffnen Sie
public/index.js
. - 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
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild .
- 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/
- 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/…
- Kehren Sie zu Ihrem Code zurück, indem Sie in der Glitch-Benutzeroberfläche auf View Source (Quelle anzeigen) klicken.
- Ö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. - Öffnen Sie
server.js
. - 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
- Kehren Sie zum Tab „App“ zurück.
- Klicken Sie auf Push-Abo abbestellen.
- Sieh dir die Glitch-Protokolle noch einmal an. Sie sollten
/remove-subscription
gefolgt von den Aboinformationen des Clients sehen. - 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.
- 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);
});
- 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} `);
});
});
}
- 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);
}
});
- Kehren Sie zum Tab „App“ zurück.
- 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.
- Klicken Sie auf Benachrichtigen. Sie sollten eine Push-Benachrichtigung erhalten. Der Titel sollte
Hello, Notifications!
und der TextID: <ID>
sein, wobei<ID>
eine Zufallszahl ist. - Ö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.