Push-Benachrichtigungen

Hier finden Sie eine Übersicht darüber, was Push-Benachrichtigungen sind, warum Sie sie verwenden sollten und wie sie funktionieren.

Kayce Basques
Matt Gaunt
X Startseite

Was sind Push-Benachrichtigungen?

Mit Push-Mitteilungen können Sie Nutzer auch dann auf Informationen aufmerksam machen, wenn sie Ihre Website nicht verwenden. Sie werden Push-Nachrichten genannt, 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 enthalten kleine Informationseinheiten. Websites können Nutzer über wichtige, zeitkritische Ereignisse oder Aktionen informieren, die sie ausführen müssen. Das Aussehen von Benachrichtigungen variiert je nach Plattform:

Beispiele für Benachrichtigungen unter macOS und Android
Beispiele für Benachrichtigungen unter macOS und Android

Push-Nachrichten und Benachrichtigungen sind zwei separate, aber sich ergänzende Technologien. Push ist die Technologie, mit der Nachrichten von Ihrem Server an Nutzer gesendet werden, auch wenn sie Ihre Website gerade nicht aktiv verwenden. Benachrichtigungen sind die Technologie, mit der die gesendeten Informationen auf dem Gerät des Nutzers angezeigt werden. Es ist möglich, Benachrichtigungen ohne Push-Messaging zu verwenden. Vielleicht wird es eines Tages auch möglich sein, Push-Nachrichten ohne Nutzerbenachrichtigungen zu verwenden (Silent Push). Derzeit ist das jedoch nicht möglich. In der Praxis werden sie in der Regel zusammen verwendet. Nutzer ohne technisches Vorwissen verstehen wahrscheinlich nicht den Unterschied zwischen Push-Mitteilungen und Benachrichtigungen. In dieser Sammlung beziehen sich Push-Benachrichtigungen auf die Kombination aus dem Senden einer Nachricht und der anschließenden Anzeige als Benachrichtigung. Wenn wir von Push-Nachrichten sprechen, beziehen wir uns auf die Push-Technologie an sich. Und wenn wir von Benachrichtigungen sprechen, beziehen wir uns auf die Benachrichtigungstechnologie an sich.

Vorteile von Push-Benachrichtigungen

  • Push-Benachrichtigungen sind eine Möglichkeit für Nutzer, zeitnahe, relevante und präzise Informationen zu erhalten.
  • Als Websiteinhaber können Sie mit Push-Benachrichtigungen das Nutzer-Engagement steigern.

Wie funktionieren Push-Benachrichtigungen?

Die wichtigsten Schritte zur Implementierung von Push-Benachrichtigungen sind:

  1. Fügen Sie Clientlogik hinzu, um den Nutzer um Erlaubnis zum Senden von Push-Benachrichtigungen zu bitten und dann Informationen zur Client-ID an Ihren Server zum Speichern in einer Datenbank zu senden.
  2. Serverlogik hinzufügen, um Nachrichten an Clientgeräte zu senden
  3. Clientlogik hinzufügen, um Nachrichten zu empfangen, die an das Gerät gepusht wurden, und sie als Benachrichtigungen anzuzeigen

Im Folgenden werden diese Schritte ausführlicher beschrieben.

Berechtigung zum Senden von Push-Benachrichtigungen erhalten

Ihre Website muss zuerst die Erlaubnis des Nutzers einholen, Push-Benachrichtigungen zu senden. Dies sollte durch eine Nutzergeste ausgelöst werden, z. B. durch Klicken auf die Schaltfläche Ja neben einer Do you want to receive push notifications?-Aufforderung. Nach dieser Bestätigung rufen Sie Notification.requestPermission() an. Das Betriebssystem oder der Browser auf dem Gerät des Nutzers zeigt wahrscheinlich eine Art Benutzeroberfläche an, über die der Nutzer bestätigen muss, dass er Push-Benachrichtigungen aktivieren möchte. Diese Benutzeroberfläche variiert je nach Plattform.

Client für Push-Benachrichtigungen abonnieren

Nachdem Sie die Berechtigung erhalten haben, muss Ihre Website den Vorgang zum Abonnieren von Push-Benachrichtigungen für den Nutzer starten. Das geschieht über JavaScript mithilfe der Push API. Während des Abovorgangs müssen Sie einen öffentlichen Authentifizierungsschlüssel angeben. Weitere Informationen dazu finden Sie später. Nachdem Sie den Abovorgang gestartet haben, stellt der Browser eine Netzwerkanfrage an einen Webdienst, der als Push-Dienst bezeichnet wird. Weitere Informationen dazu finden Sie später.

Wenn das Abo erfolgreich war, gibt der Browser ein PushSubscription-Objekt zurück. Diese Daten müssen langfristig gespeichert werden. Normalerweise werden die Informationen an einen von Ihnen verwalteten Server gesendet, der sie dann in einer Datenbank speichert.

Sie benötigen die Berechtigung zum Senden von Push-Nachrichten. Get PushSubscription Sende „PushSubscription“ an deinen Server.

Push-Nachricht senden

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

  • Welche Daten in die Nachricht aufgenommen werden sollen.
  • An welchen Client die Nachricht gesendet werden soll.
  • Eine Anleitung dazu, wie der Push-Dienst die Nachricht senden soll. Sie können beispielsweise angeben, dass der Push-Dienst nach 10 Minuten nicht mehr versuchen soll, die Nachricht zu senden.

Normalerweise stellen Sie die Web-Push-Protokollanfrage über einen von Ihnen verwalteten Server. Natürlich muss Ihr Server die rohe Webdienstanfrage nicht selbst erstellen. Es gibt Bibliotheken, die das für Sie erledigen können, z. B. die 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 wieder online ist.

Jeder Browser verwendet den gewünschten Push-Dienst. Als Websiteentwickler haben Sie darauf keinen Einfluss. Das ist kein Problem, da die Web-Push-Protokollanfrage standardisiert ist. Mit anderen Worten: Sie müssen sich nicht darum kümmern, welchen Push-Dienst der Browseranbieter verwendet. Sie müssen nur darauf achten, dass Ihre Web-Push-Protokollanfrage der Spezifikation entspricht. Darin wird unter anderem festgelegt, dass die Anfrage bestimmte Header enthalten und die Daten als Bytestream gesendet werden müssen.

Sie müssen jedoch darauf achten, dass Sie die Web-Push-Protokollanfrage an den richtigen Push-Dienst senden. Diese Informationen sind in den PushSubscription-Daten enthalten, die der Browser während des Abovorgangs an dich zurückgegeben hat. Ein PushSubscription-Objekt sieht so aus:

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

Die Domain der endpoint ist im Grunde der Push-Dienst. Der Pfad der endpoint enthält Informationen zur Client-ID, anhand derer der Push-Dienst genau bestimmen 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 sein. So kann der Push-Dienst nicht auf die Daten zugreifen, die Sie an den Client senden. Denken Sie daran, dass der Browseranbieter entscheidet, welcher Push-Dienst verwendet werden soll, und dass dieser Push-Dienst theoretisch unsicher sein könnte. Ihr Server muss die im PushSubscription bereitgestellte keys verwenden, um seine Web-Push-Protokollanfragen zu verschlüsseln.

Web-Push-Protokollanfragen signieren

Mit dem Push-Dienst können Sie verhindern, dass andere Personen Nachrichten an Ihre Nutzer senden. Technisch gesehen ist das nicht erforderlich, aber für die einfachste Implementierung in Chrome ist es notwendig. In Firefox ist sie optional. Bei anderen Browsern ist dies möglicherweise in Zukunft erforderlich.

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

  • Sie generieren den privaten und den öffentlichen Schlüssel einmalig. Die Kombination aus privatem und öffentlichem 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 aus Ihrem JavaScript-Code abonnieren, geben Sie Ihren öffentlichen Schlüssel an. Wenn der Push-Dienst eine endpoint für das Gerät generiert, wird der angegebene öffentliche Schlüssel mit der endpoint verknüpft.
  • Wenn Sie eine Web-Push-Protokollanfrage 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, um die signierten Informationen zu authentifizieren. Wenn die Signatur gültig ist, weiß der Push-Dienst, dass die Anfrage von einem Server mit dem entsprechenden privaten Schlüssel stammt.

Zustellung der Push-Nachricht anpassen

Die Web-Push-Protokollanfragespezifikation 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 festlegt, wie lange der Push-Dienst versuchen soll, eine Nachricht zuzustellen.
  • Die Dringlichkeit der Nachricht, was nützlich ist, wenn der Push-Dienst die Akkulaufzeit des Clients verlängert, indem nur Nachrichten mit hoher Priorität gesendet werden.
  • Das Thema einer Nachricht, durch das alle ausstehenden Nachrichten zum selben Thema durch die neueste Nachricht ersetzt werden.

Push-Nachrichten als Benachrichtigungen empfangen und anzeigen

Nachdem Sie die Web-Push-Protokollanfrage an den Push-Dienst gesendet haben, wird Ihre Anfrage so lange in der Warteschlange gehalten, bis eines der folgenden Ereignisse eintritt:

  1. Der Client kommt online und der Push-Dienst liefert die Push-Nachricht.
  2. Die Nachricht läuft ab.

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

Die Nachricht wird auf dem Gerät empfangen. Der Browser weckt den Dienst-Worker auf. Das Push-Ereignis wird gesendet.

Weitere Informationen

Code labs