Vorteile von Push-Benachrichtigungen
Benachrichtigungen enthalten kleine Informationseinheiten. Web-Apps können Nutzer über wichtige, zeitkritische Ereignisse oder Aktionen informieren, die sie ausführen müssen.
Das Erscheinungsbild von Benachrichtigungen variiert je nach Plattform. Beispiel:
Traditionell mussten Webbrowser den Austausch von Informationen zwischen Server und Client durch eine Anfrage initiieren. Mit der Web-Push-Technologie können Sie Ihren Server so konfigurieren, dass Benachrichtigungen gesendet werden, wenn es für Ihre App sinnvoll ist. Ein Push-Dienst erstellt eindeutige URLs für jeden abonnierten Dienst-Worker. Wenn Nachrichten an die URL eines Service Workers gesendet werden, werden Ereignisse auf diesem Service Worker ausgelöst, wodurch eine Benachrichtigung angezeigt wird.
Push-Benachrichtigungen können Nutzern helfen, Ihre App optimal zu nutzen, indem sie sie auffordern, die App wieder zu öffnen und anhand der neuesten Informationen zu verwenden.
Benachrichtigungen erstellen und senden
Erstellen Sie Benachrichtigungen mit der Notifications API. Ein Notification
-Objekt hat einen title
-String und ein options
-Objekt. Beispiel:
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
Das Symbol title
wird fett angezeigt, wenn die Benachrichtigung aktiv ist, während das Symbol body
zusätzlichen Text enthält.
Berechtigung zum Senden von Benachrichtigungen erhalten
Damit Ihre App eine Benachrichtigung anzeigen kann, muss der Nutzer der App dazu die Berechtigung erteilen:
Notification.requestPermission();
Wie funktionieren Push-Benachrichtigungen?
Die Vorteile von Benachrichtigungen ergeben sich aus der Kombination von Dienstmitarbeitern und Push-Technologie:
Dienstworker können im Hintergrund ausgeführt werden und Benachrichtigungen anzeigen, auch wenn Ihre App nicht auf dem Bildschirm sichtbar ist.
Mit der Push-Technologie können Sie Ihren Server so konfigurieren, dass Benachrichtigungen gesendet werden, wenn es für Ihre App sinnvoll ist. Ein Push-Dienst erstellt eindeutige URLs für jeden abonnierten Dienst-Worker. Wenn Nachrichten an die URL eines Service Workers gesendet werden, werden Ereignisse auf diesem Service Worker ausgelöst, wodurch eine Benachrichtigung angezeigt wird.
Im folgenden Beispiel registriert ein Client einen Dienst-Worker und abonniert Push-Benachrichtigungen. Anschließend sendet der Server eine Benachrichtigung an den Aboendpunkt.
Der Client und der Dienstarbeiter verwenden Vanilla-JavaScript ohne zusätzliche Bibliotheken. Der Server wird mit dem npm-Paket express
auf Node.js erstellt und verwendet das npm-Paket web-push
, um Benachrichtigungen zu senden. Um Informationen an den Server zu senden, ruft der Client eine POST-URL auf, die der Server freigegeben hat.
Teil 1: Service Worker registrieren und Push-Benachrichtigungen abonnieren
Eine Clientanwendung registriert einen Dienst-Worker bei
ServiceWorkerContainer.register()
. Der registrierte Service Worker wird im Hintergrund weiter ausgeführt, wenn der Client inaktiv ist.Kundencode:
navigator.serviceWorker.register('sw.js');
Der Client bittet den Nutzer um Erlaubnis zum Senden von Benachrichtigungen.
Kundencode:
Notification.requestPermission();
Um Push-Benachrichtigungen zu aktivieren, erstellt der Service Worker mit
PushManager.subscribe()
ein Push-Abo. Beim Aufruf vonPushManager.subscribe()
gibt der Dienst-Worker den API-Schlüssel der App als Kennung an.Kundencode:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ });
});Push-Dienste wie Firebase Cloud Messaging basieren auf einem Abomodell. Wenn ein Dienstarbeiter einen Push-Dienst abonniert, indem er
PushManager.subscribe()
aufruft, erstellt der Push-Dienst eine eindeutige URL für diesen Dienstarbeiter. Die URL wird als Aboendpunkt bezeichnet.Der Client sendet den Aboendpunkt an den App-Server.
Kundencode:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
sendToServer(subscription, '/new-subscription', 'POST');
});
});Server code:
app.post('/new-subscription', (request, response) => {
// extract subscription from request
// send 'OK' response
});
Teil 2: Benachrichtigung senden
Der Webserver sendet eine Benachrichtigung an den Aboendpunkt.
Server code:
const webpush = require('web-push');
let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };
webpush.sendNotification(subscription, payload, options);Benachrichtigungen, die an den Aboendpunkt gesendet werden, lösen Push-Ereignisse mit dem Service Worker als Ziel aus. Der Service Worker empfängt die Nachricht und zeigt sie dem Nutzer als Benachrichtigung an.
Service Worker-Code:
self.addEventListener('push', (event) => {
let title = { /* get notification title from event data */ }
let options = { /* get notification options from event data */ }
showNotification(title, options);
})Der Nutzer interagiert mit der Benachrichtigung und aktiviert die Webanwendung, falls sie noch nicht aktiv war.
Nächste Schritte
Im nächsten Schritt implementieren Sie Push-Benachrichtigungen.
Wir haben eine Reihe von Codelabs erstellt, die Sie durch jeden Schritt des Prozesses führen.