Diese Seite wurde von der Cloud Translation API übersetzt.

Push-Benachrichtigungen

Eine Übersicht darüber, was Push-Benachrichtigungen sind, warum sie verwendet werden können und wie sie funktionieren.

Kayce Basques

Matt Gaunt

Was sind Push-Benachrichtigungen?

Mit Push-Nachrichten können Sie Ihre Nutzer auch dann auf Informationen aufmerksam machen, wenn sie Ihre Website gerade nicht verwenden. Sie werden als push bezeichnet, weil Sie Informationen an Ihre Nutzer senden können, auch wenn sie nicht aktiv sind. Vergleichen Sie die Push-Technologie mit der Pull-Technologie, um dieses Konzept besser zu verstehen.

Benachrichtigungen sind für den Nutzer in kleinen Mengen von Informationen verfügbar. Websites können Benachrichtigungen verwenden, um Nutzer über wichtige, zeitkritische Ereignisse oder Aktionen zu informieren, die der Nutzer ausführen muss. Das Design von Benachrichtigungen variiert je nach Plattform:

Beispiele für Benachrichtigungen unter macOS und Android

Push-Nachrichten und Benachrichtigungen sind zwei separate, sich ergänzende Technologien. Push ist die Technologie, mit der Nachrichten von Ihrem Server an Nutzer gesendet werden, auch wenn diese Ihre Website nicht aktiv nutzen. Benachrichtigungen sind die Technologie, mit der die Push-Informationen auf dem Gerät des Nutzers angezeigt werden. Benachrichtigungen können auch ohne Push-Benachrichtigungen verwendet werden. An einem Tag kann es auch möglich sein, Push-Nachrichten ohne Benachrichtigungen für Nutzer zu verwenden (silent Push), aber im Browser ist dies derzeit nicht zulässig. In der Praxis werden sie meist zusammen verwendet. Ein technisch nicht versierter Nutzer wird den Unterschied zwischen Push-Nachrichten und Benachrichtigungen wahrscheinlich nicht verstehen. Mit Push-Benachrichtigungen meinen wir in dieser Sammlung die Kombination aus Push- und anschließendem Anzeigen dieser Nachricht als Benachrichtigung. Mit Push-Nachrichten meinen wir Push-Technologie allein. Und wenn wir Benachrichtigungen nennen, bezieht sich das auf Benachrichtigungstechnologie.

Warum Push-Benachrichtigungen?

Push-Benachrichtigungen sind eine Möglichkeit, zeitnahe, relevante und genaue Informationen zu erhalten.
Für Sie als Websiteinhaber sind Push-Benachrichtigungen eine Möglichkeit, die Nutzerinteraktion zu erhöhen.

Wie funktionieren Push-Benachrichtigungen?

Das sind die wichtigsten Schritte zur Implementierung von Push-Benachrichtigungen:

Clientlogik hinzufügen, um den Nutzer um die Berechtigung zum Senden von Push-Benachrichtigungen zu bitten, und anschließendes Senden von Client-ID-Informationen zum Speichern in einer Datenbank an Ihren Server.
Serverlogik hinzufügen, um Nachrichten an Clientgeräte zu senden
Hinzufügen von Clientlogik zum Empfangen von Nachrichten, die auf das Gerät übertragen wurden und zum Anzeigen dieser als Benachrichtigungen.

Im Folgenden werden diese Schritte ausführlicher erläutert.

Berechtigung zum Senden von Push-Benachrichtigungen einholen

Zuerst benötigt Ihre Website die Erlaubnis des Nutzers, Push-Benachrichtigungen zu senden. Dies sollte durch eine Nutzergeste ausgelöst werden, z. B. das Klicken auf die Schaltfläche Ja neben einer Do you want to receive push notifications?-Aufforderung. Rufen Sie nach der Bestätigung Notification.requestPermission() auf. Im Betriebssystem oder Browser auf dem Gerät des Nutzers wird wahrscheinlich eine Art UI angezeigt, über die offiziell bestätigt wird, dass der Nutzer Push-Benachrichtigungen aktivieren möchte. Diese Benutzeroberfläche variiert je nach Plattform.

Push-Benachrichtigungen für den Kunden abonnieren

Nachdem du die Berechtigung erhalten hast, muss deine Website damit beginnen, Push-Benachrichtigungen für den Nutzer zu abonnieren. Dies erfolgt über JavaScript mithilfe der Push API. Während des Abovorgangs musst du einen öffentlichen Authentifizierungsschlüssel angeben. Dazu erfährst du später mehr. Nachdem du den Abovorgang gestartet hast, sendet der Browser eine Netzwerkanfrage an einen als Push-Dienst bezeichneten Webdienst. Dazu erfährst du später noch mehr.

Wenn das Abo erfolgreich war, gibt der Browser ein PushSubscription-Objekt zurück. Sie müssen diese Daten langfristig speichern. In der Regel werden die Informationen an einen von Ihnen verwalteten Server gesendet und vom Server in einer Datenbank gespeichert.

Berechtigung zum Senden von Push-Nachrichten anfordern PushSubscription abrufen. Sende PushSubscription an deinen Server.

Push-Nachricht senden

Ihr Server sendet die Push-Nachricht nicht direkt an einen Client. Ein Push-Dienst tut dies. Ein Push-Dienst ist ein Webdienst, der vom Browseranbieter Ihres Nutzers gesteuert wird. Wenn Sie eine Push-Benachrichtigung an einen Client senden möchten, müssen Sie eine Webdienstanfrage an einen Push-Dienst stellen. Die Webdienstanfrage, die Sie an den Push-Dienst senden, wird als Web-Push-Protokollanfrage bezeichnet. Die Anfrage für das Web-Push-Protokoll sollte Folgendes enthalten:

Welche Daten die Nachricht enthalten soll
An welchen Client die Nachricht gesendet werden soll.
Eine Anleitung dazu, wie der Push-Dienst die Nachricht übermitteln soll. Sie können beispielsweise festlegen, dass der Push-Dienst nach 10 Minuten den Versuch beenden soll, die Nachricht zu senden.

Normalerweise erfolgt die Anfrage zum Web-Push-Protokoll über einen von Ihnen verwalteten Server. Natürlich muss Ihr Server die Rohanfrage für einen Webdienst nicht selbst erstellen. Es gibt Bibliotheken, die das für Sie übernehmen, z. B. web-push-libs. Der zugrunde liegende Mechanismus ist jedoch eine Webdienstanfrage über HTTP.

Ihr Server sendet eine Web-Push-Protokollanfrage an den Push-Dienst und der Push-Dienst sendet die Nachricht an das Gerät des Nutzers.

Der Push-Dienst empfängt Ihre Anfrage, authentifiziert sie und leitet die Push-Nachricht an den entsprechenden Client weiter. Wenn der Browser des Clients offline ist, stellt der Push-Dienst die Push-Nachricht in die Warteschlange, bis der Browser online ist.

Jeder Browser verwendet einen beliebigen Push-Dienst. Sie als Website-Entwickler haben keine Kontrolle darüber. Dies stellt kein Problem dar, da die Web-Push-Protokollanfrage standardisiert ist. Mit anderen Worten: Es ist egal, welchen Push-Dienst der Browseranbieter verwendet. Sie müssen lediglich darauf achten, dass Ihre Web-Push-Protokollanfrage der Spezifikation entspricht. Die Spezifikation besagt unter anderem, dass die Anfrage bestimmte Header enthalten muss und die Daten als Bytestream gesendet werden müssen.

Sie müssen jedoch darauf achten, dass Sie die Web-Push-Protokoll-Anfrage an den richtigen Push-Dienst senden. Die PushSubscription-Daten, die der Browser während des Abovorgangs zurückgegeben hat, liefern diese Informationen. Ein PushSubscription-Objekt sieht so aus:

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

Die Domain von endpoint ist im Wesentlichen der Push-Dienst. Der Pfad von endpoint besteht aus Client-ID-Informationen, mit deren Hilfe der Push-Dienst genau ermitteln kann, an welchen Client die Nachricht gesendet werden soll.

Die keys werden für die Verschlüsselung verwendet, was im Folgenden erläutert wird.

Push-Nachricht verschlüsseln

Die Daten, die Sie an einen Push-Dienst senden, müssen verschlüsselt werden. Dadurch wird verhindert, dass der Push-Dienst die Daten sehen kann, die Sie an den Client senden. Denken Sie daran, dass der Browseranbieter entscheidet, welcher Push-Dienst verwendet wird und dass dieser Push-Dienst theoretisch unsicher oder unsicher sein könnte. Dein Server muss die in der PushSubscription angegebene keys verwenden, um seine Web-Push-Protokollanfragen zu verschlüsseln.

Anfragen für Web-Push-Protokoll signieren

Mit dem Push-Dienst können Sie verhindern, dass andere Personen Nachrichten an Ihre Nutzer senden. Technisch gesehen müssen Sie das nicht tun, aber die einfachste Implementierung in Chrome erfordert es. In Firefox ist dies optional. Für andere Browser wird sie möglicherweise in Zukunft benötigt.

Dieser Workflow umfasst einen privaten und einen öffentlichen Schlüssel, die für Ihre Anwendung eindeutig sind. Der Authentifizierungsprozess läuft ungefähr so ab:

Sie generieren den privaten und öffentlichen Schlüssel als einmalige Aufgabe. Die Kombination aus dem privaten und öffentlichen Schlüssel wird als Anwendungsserverschlüssel bezeichnet. Sie werden auch als VAPID-Schlüssel bezeichnet. VAPID ist die Spezifikation, die diesen Authentifizierungsprozess definiert.
Wenn Sie einen Client für Push-Benachrichtigungen von Ihrem JavaScript-Code abonnieren, geben Sie Ihren öffentlichen Schlüssel an. Wenn der Push-Dienst ein endpoint für das Gerät generiert, verknüpft er den bereitgestellten öffentlichen Schlüssel mit dem endpoint.
Wenn Sie eine Web-Push-Protokoll-Anfrage senden, signieren Sie einige JSON-Informationen mit Ihrem privaten Schlüssel.
Wenn der Push-Dienst Ihre Web-Push-Protokollanfrage empfängt, verwendet er den gespeicherten öffentlichen Schlüssel zur Authentifizierung der signierten Informationen. Wenn die Signatur gültig ist, weiß der Push-Dienst, dass die Anfrage von einem Server mit dem passenden privaten Schlüssel stammt.

Zustellung von Push-Nachrichten anpassen

Die Anfragespezifikation für das Web-Push-Protokoll definiert auch Parameter, mit denen Sie anpassen können, wie der Push-Dienst versucht, die Push-Nachricht an den Client zu senden. Sie können beispielsweise Folgendes anpassen:

Die Gültigkeitsdauer (TTL) einer Nachricht, die definiert, wie lange der Push-Dienst versuchen soll, eine Nachricht zu senden.
Die Dringlichkeit der Nachricht. Dies ist nützlich, wenn der Push-Dienst die Akkulaufzeit des Clients erhalten soll, indem er nur Nachrichten mit hoher Priorität sendet.
Das Thema einer Nachricht, das alle ausstehenden Nachrichten desselben Themas durch die neueste Nachricht ersetzt.

Push-Nachrichten als Benachrichtigungen empfangen und anzeigen

Nachdem Sie die Anfrage für das Web-Push-Protokoll an den Push-Dienst gesendet haben, wartet dieser in der Warteschlange, bis eines der folgenden Ereignisse eintritt:

Der Client geht online und der Push-Dienst übermittelt die Push-Nachricht.
Die Nachricht läuft ab.

Wenn ein Clientbrowser eine Push-Nachricht empfängt, entschlüsselt er die Daten der Push-Nachrichten und sendet ein push-Ereignis an Ihren Service-Worker. Ein Service Worker ist im Grunde JavaScript-Code, der auch dann im Hintergrund ausgeführt werden kann, wenn Ihre Website nicht geöffnet oder der Browser geschlossen ist. Rufen Sie im Event-Handler push Ihres Service Workers ServiceWorkerRegistration.showNotification() auf, um die Informationen als Benachrichtigung anzuzeigen.

Die Nachricht wird auf dem Gerät empfangen. Der Service Worker wird vom Browser aktiviert. Push-Ereignis wird gesendet.