Nutzer mit Push-Benachrichtigungen erneut ansprechen

Kate Jeffreys
Kate Jeffreys

Warum Push-Benachrichtigungen?

Benachrichtigungen sind für den Nutzer in kleinen Mengen von Informationen verfügbar. Webanwendungen können Benachrichtigungen verwenden, um Nutzer über wichtige, zeitkritische Ereignisse oder Aktionen zu informieren, die sie ausführen müssen.

Das Erscheinungsbild von Benachrichtigungen variiert je nach Plattform. Beispiel:

Über eine Benachrichtigung auf einem Android-Gerät.
Eine Benachrichtigung auf einem MacBook.

Bisher mussten Webbrowser den Informationsaustausch zwischen Server und Client über 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 Nachrichten an die URL eines Service Workers gesendet werden, werden bei diesem Service Worker Ereignisse ausgelöst und der Service Worker aufgefordert, eine Benachrichtigung anzuzeigen.

Mit Push-Benachrichtigungen können Nutzer Ihre App optimal nutzen. Dazu werden sie aufgefordert, die App auf Grundlage aktueller Informationen erneut zu öffnen und zu verwenden.

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);

title wird bei aktiven Benachrichtigungen fett angezeigt, body enthält zusätzlichen Text.

Berechtigung zum Senden von Benachrichtigungen erhalten

Damit eine Benachrichtigung angezeigt werden kann, muss der Nutzer Ihrer App die entsprechende Berechtigung einholen:

Notification.requestPermission();

Wie funktionieren Push-Benachrichtigungen?

Die wahre Wirkung von Benachrichtigungen beruht auf der 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 sichtbar ist.

  • Mit 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 Nachrichten an die URL eines Service Workers gesendet werden, werden bei diesem Service Worker Ereignisse ausgelöst und der Service Worker 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 der Service Worker verwenden einfachen JavaScript-Code ohne zusätzliche Bibliotheken. Der Server wird mit dem npm-Paket express auf Node.js erstellt und verwendet das npm-Paket web-push zum Senden von Benachrichtigungen. Um Informationen an den Server zu senden, ruft der Client eine POST-URL auf, die der Server offengelegt hat.

Teil 1: Service Worker registrieren und Push abonnieren

  1. Eine Client-App registriert einen Service Worker bei ServiceWorkerContainer.register(). Der registrierte Service Worker wird auch dann im Hintergrund ausgeführt, wenn der Client inaktiv ist.

    Kundencode:

    navigator.serviceWorker.register('sw.js');

  2. Der Client fordert vom Nutzer die Berechtigung zum Senden von Benachrichtigungen an.

    Kundencode:

    Notification.requestPermission();

  3. Zum Aktivieren von Push-Benachrichtigungen 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 nutzen ein Abomodell. Wenn ein Service Worker einen Push-Dienst abonniert, indem er PushManager.subscribe() aufruft, erstellt der Push-Dienst eine eindeutige URL für diesen Service Worker. Die URL wird als Aboendpunkt bezeichnet.

  4. 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

  1. 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);

  2. 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);
})

  3. Der Nutzer interagiert mit der Benachrichtigung. Dadurch wird die Web-App aktiviert, sofern sie noch nicht aktiviert war.

Nächste Schritte

Implementieren Sie als nächsten Schritt Push-Benachrichtigungen!

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