Vorteile von Push-Benachrichtigungen
Bei Benachrichtigungen werden dem Nutzer kleine Informationen zu einem bestimmten Thema präsentiert. Web-Apps können Benachrichtigungen verwenden, um Nutzer über wichtige, zeitkritische Ereignisse oder Aktionen zu informieren, die sie ausführen müssen.
Das Design von Benachrichtigungen variiert je nach Plattform. Beispiel:
<ph type="x-smartling-placeholder">Früher mussten Webbrowser den Datenaustausch zwischen Server und Client durch eine Anfrage initiieren. Mit der Web-Push-Technologie hingegen können Sie Ihren Server so konfigurieren, dass Benachrichtigungen gesendet werden, wenn dies für Ihre App sinnvoll ist. Ein Push-Dienst erstellt eindeutige URLs für jeden abonnierten Service Worker. Wenn Sie Nachrichten an die URL eines Service Workers senden, werden Ereignisse für diesen Service Worker ausgelöst und er aufgefordert, eine Benachrichtigung anzuzeigen.
Push-Benachrichtigungen können Nutzern dabei helfen, Ihre App optimal zu nutzen. Sie werden aufgefordert, sie erneut zu öffnen und sie basierend auf den neuesten Informationen zu verwenden.
Benachrichtigungen erstellen und senden
Erstellen Sie Benachrichtigungen mit der Benachrichtigungs-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);
title
wird fett angezeigt, wenn die Benachrichtigung aktiv ist, und body
enthält zusätzlichen Text.
Berechtigung zum Senden von Benachrichtigungen erhalten
Damit eine Benachrichtigung angezeigt werden kann, muss Ihre App die entsprechende Berechtigung vom Nutzer einholen:
Notification.requestPermission();
Wie funktionieren Push-Benachrichtigungen?
Die wahre Stärke von Benachrichtigungen entsteht durch die Kombination aus Service Workern und Push-Technologie:
Service Worker können im Hintergrund ausgeführt werden und Benachrichtigungen anzeigen, auch wenn Ihre App nicht auf dem Bildschirm zu sehen ist.
Mit der Push-Technologie können Sie Ihren Server so konfigurieren, dass Benachrichtigungen gesendet werden, wenn dies für Ihre App sinnvoll ist. Ein Push-Dienst erstellt eindeutige URLs für jeden abonnierten Service Worker. Wenn Sie Nachrichten an die URL eines Service Workers senden, werden Ereignisse für diesen Service Worker ausgelöst und er aufgefordert, eine Benachrichtigung anzuzeigen.
Im folgenden Beispielablauf registriert ein Client einen Service Worker und abonniert Push-Benachrichtigungen. Anschließend sendet der Server eine Benachrichtigung an den Aboendpunkt.
Der Client und Service Worker verwenden einfaches 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 vom Server offengelegt wurde.
Teil 1: Service Worker registrieren und Push abonnieren
Eine Client-App registriert einen Service 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 fordert vom Nutzer die Berechtigung zum Senden von Benachrichtigungen an.
Kundencode:
Notification.requestPermission();
Zum Aktivieren von Push-Benachrichtigungen verwendet der Service Worker
PushManager.subscribe()
, um ein Push-Abo zu erstellen. Im Aufruf vonPushManager.subscribe()
gibt der Service 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 Service Worker durch Aufrufen von
PushManager.subscribe()
einen Push-Dienst abonniert, erstellt der Push-Dienst eine URL, die nur für diesen Service Worker gilt. Die URL wird als Aboendpunkt bezeichnet.Der Client sendet den Aboendpunkt an den Anwendungsserver.
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);An den Aboendpunkt gesendete Benachrichtigungen 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 Web-App, falls sie noch nicht aktiviert war.
Nächste Schritte
Als nächsten Schritt kannst du Push-Benachrichtigungen implementieren.
Wir haben eine Reihe von Codelabs erstellt, die dich durch die einzelnen Schritte des Prozesses führen.