Nutzer mit Push-Benachrichtigungen erneut ansprechen

Kate Jeffreys

Vorteile von Push-Benachrichtigungen

Benachrichtigungen enthalten kleine Informationsblöcke für den Nutzer. Web-Apps können Benachrichtigungen verwenden, um Nutzer über wichtige, zeitkritische Ereignisse oder Aktionen zu informieren, die der Nutzer ausführen muss.

Das Erscheinungsbild von Benachrichtigungen variiert je nach Plattform. Beispiel:

Eine Benachrichtigung auf einem Android-Gerät.

Bisher mussten Webbrowser den Informationsaustausch zwischen Server und Client durch eine Anfrage initiieren. Mit der Web-Push-Technologie können Sie Ihren Server so konfigurieren, dass er Benachrichtigungen sendet, wenn es für Ihre App sinnvoll ist. Ein Push-Dienst erstellt eindeutige URLs für jeden registrierten Service Worker. Wenn Nachrichten an die URL eines Service Workers gesendet werden, werden Ereignisse für diesen Service Worker ausgelöst, die ihn dazu veranlassen, eine Benachrichtigung anzuzeigen.

Mithilfe von Push-Benachrichtigungen können Sie Nutzer dazu anregen, Ihre App wieder zu öffnen und zu verwenden, damit sie die neuesten Informationen erhalten.

Benachrichtigungen erstellen und senden

Benachrichtigungen mit der Notifications API erstellen 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 title wird fett angezeigt, wenn die Benachrichtigung aktiv ist, während das body zusätzlichen Text enthält.

Berechtigung zum Senden von Benachrichtigungen einholen

Damit Ihre App eine Benachrichtigung anzeigen kann, muss sie die entsprechende Berechtigung vom Nutzer erhalten:

Notification.requestPermission();

Wie funktionieren Push-Benachrichtigungen?

Das volle Potenzial von Benachrichtigungen wird durch die Kombination von Service Workern und Push-Technologie ausgeschöpft:

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 er Benachrichtigungen sendet, wenn es für Ihre App sinnvoll ist. Ein Push-Dienst erstellt eindeutige URLs für jeden registrierten Service Worker. Wenn Nachrichten an die URL eines Service Workers gesendet werden, werden Ereignisse für diesen Service Worker ausgelöst, die ihn dazu veranlassen, 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 Abo-Endpunkt.

Client und Service Worker verwenden reines JavaScript ohne zusätzliche Bibliotheken. Der Server basiert auf dem express-npm-Paket in Node.js und verwendet das web-push-npm-Paket zum Senden von Benachrichtigungen. Um Informationen an den Server zu senden, ruft der Client eine POST-URL auf, die der Server bereitgestellt hat.

Teil 1: Service Worker registrieren und Push-Benachrichtigungen abonnieren

Eine Client-App registriert einen Service Worker mit ServiceWorkerContainer.register(). Der registrierte Service Worker wird weiterhin im Hintergrund 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();
```
Damit Push-Benachrichtigungen aktiviert werden können, verwendet der Service Worker PushManager.subscribe(), um ein Push-Abo zu erstellen. Beim Aufruf von PushManager.subscribe() stellt der Service Worker den API-Schlüssel der App als Kennung bereit.

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 einen Push-Dienst durch Aufrufen von PushManager.subscribe() abonniert, erstellt der Push-Dienst eine URL, die für diesen Service Worker eindeutig ist. Die URL wird als Abo-Endpunkt bezeichnet.

Der Client sendet den Abo-Endpunkt 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 Abo-Endpunkt.

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 Abo-Endpunkt 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. Dadurch wird die Web-App aktiviert, falls sie es nicht bereits war.

Nächste Schritte

Als Nächstes sollten Sie Push-Benachrichtigungen implementieren.

Wir haben eine Reihe von Codelabs erstellt, die Sie durch jeden Schritt des Prozesses führen.