Push-Benachrichtigungen

Eine Übersicht über Push-Benachrichtigungen, warum Sie sie verwenden sollten und wie sie funktionieren.

Kayce Basques
Kayce Basques
X GitHub
Matt Gaunt
X Startseite

Was sind Push-Benachrichtigungen?

Mit Push-Nachrichten können Sie Nutzer auch dann auf Informationen aufmerksam machen, wenn sie Ihre Website nicht verwenden. Sie werden als Push -Nachrichten 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 enthalten kleine Informationsblöcke für den Nutzer. Websites 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:

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 zum Senden von Nachrichten von Ihrem Server an Nutzer, auch wenn sie Ihre Website nicht aktiv verwenden. Benachrichtigungen sind die Technologie zum Anzeigen der gesendeten Informationen auf dem Gerät des Nutzers. Es ist möglich, Benachrichtigungen ohne Push-Nachrichten zu verwenden. Eines Tages ist es möglicherweise auch möglich, Push-Nachrichten ohne Benachrichtigungen für Nutzer zu verwenden (Silent Push). Das ist derzeit jedoch nicht möglich. In der Praxis werden sie in der Regel zusammen verwendet. Ein nicht technischer Nutzer wird den Unterschied zwischen Push-Nachrichten und Benachrichtigungen wahrscheinlich nicht verstehen. Wenn wir in dieser Sammlung Push-Benachrichtigungen sagen, meinen wir die Kombination aus dem Senden einer Nachricht und der Anzeige als Benachrichtigung. Wenn wir Push-Nachrichten sagen, beziehen wir uns nur auf die Push-Technologie. Und wenn wir Benachrichtigungen sagen, beziehen wir uns nur auf die Benachrichtigungstechnologie.

Warum Push-Benachrichtigungen verwenden?

  • Für Nutzer sind Push-Benachrichtigungen eine Möglichkeit, zeitnah, relevante, und genaue Informationen zu erhalten.
  • Für Sie als Websiteinhaber sind Push-Benachrichtigungen eine Möglichkeit, die Nutzerinteraktion zu steigern.

Wie funktionieren Push-Benachrichtigungen?

Auf übergeordneter Ebene sind die wichtigsten Schritte zur Implementierung von Push-Benachrichtigungen:

  1. Clientlogik hinzufügen, um den Nutzer um Erlaubnis zum Senden von Push-Benachrichtigungen zu bitten, und dann Client-ID-Informationen zur Speicherung in einer Datenbank an Ihren Server 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 gesendet wurden, und sie als Benachrichtigungen anzuzeigen.

Im Rest dieser Seite werden diese Schritte genauer erläutert.

Erlaubnis zum Senden von Push-Benachrichtigungen einholen

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

Client für Push-Benachrichtigungen abonnieren

Nachdem Sie die Erlaubnis erhalten haben, muss Ihre Website den Prozess zum Abonnieren von Push-Benachrichtigungen für den Nutzer initiieren. Dies erfolgt über JavaScript, mit der Push API. Während des Abos müssen Sie einen öffentlichen Authentifizierungsschlüssel angeben. Weitere Informationen dazu finden Sie weiter unten. Nachdem Sie den Aboprozess gestartet haben, sendet der Browser eine Netzwerkanfrage an einen Webdienst, der als Push-Dienst bezeichnet wird. Weitere Informationen dazu finden Sie weiter unten.

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 dazu an einen von Ihnen kontrollierten Server gesendet, der sie dann in einer Datenbank speichert.

1. Berechtigung zum Senden von Push-Nachrichten einholen 2. PushSubscription abrufen. 3. Senden Sie PushSubscription an Ihren Server.

Push-Nachricht senden

Ihr Server sendet die Push-Nachricht nicht direkt an einen Client. Das übernimmt ein Push-Dienst. Ein Push-Dienst ist ein Webdienst, der vom Browseranbieter Ihres Nutzers kontrolliert wird. Wenn Sie eine Push-Benachrichtigung an einen Client senden möchten, müssen Sie eine Webdienstanfrage an einen Push-Dienst senden. Die Webdienstanfrage, die Sie an den Push-Dienst senden, wird als Web-Push-Protokollanfrage bezeichnet. Die Web-Push-Protokollanfrage sollte Folgendes enthalten:

  • Welche Daten in die Nachricht aufgenommen werden sollen.
  • An welchen Client die Nachricht gesendet werden soll.
  • Anweisungen, wie der Push-Dienst die Nachricht zustellen soll. Sie können beispielsweise angeben, dass der Push-Dienst nach 10 Minuten keine weiteren Versuche unternehmen soll, die Nachricht zu senden.

Normalerweise senden Sie die Web-Push-Protokollanfrage über einen von Ihnen kontrollierten Server. Ihr Server muss die Webdienstanfrage natürlich nicht selbst erstellen. Es gibt Bibliotheken, die das für Sie übernehmen können, z. B. die Web-Push-Bibliotheken. 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 einen beliebigen Push-Dienst. Sie als Websiteentwickler haben keine Kontrolle darüber. Das ist kein Problem, da die Web-Push-Protokoll Anfrage 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. Unter anderem wird in der Spezifikation festgelegt, dass die Anfrage bestimmte Header enthalten muss und die Daten als Byte-Stream gesendet werden müssen.

Sie müssen jedoch darauf achten, dass Sie die Web-Push-Protokollanfrage an den richtigen Push-Dienst senden. Diese Informationen finden Sie in den PushSubscription-Daten, die der Browser Ihnen während des Aboprozesses 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 des endpoint ist im Wesentlichen der Push-Dienst. Der Pfad des endpoint enthält Client-ID-Informationen, mit denen der Push-Dienst genau bestimmen kann, an welchen Client die Nachricht gesendet werden soll.

Die keys werden für die Verschlüsselung verwendet, die im nächsten Abschnitt erläutert wird.

Push-Nachricht verschlüsseln

Die Daten, die Sie an einen Push-Dienst senden, müssen verschlüsselt sein. So 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 sein könnte. Ihr Server muss die in der PushSubscription angegebenen keys verwenden, um die Web-Push-Protokollanfragen zu verschlüsseln.

Web-Push-Protokollanfragen signieren

Der Push-Dienst bietet eine Möglichkeit, zu verhindern, dass andere Nachrichten an Ihre Nutzer senden. Technisch gesehen ist das nicht erforderlich, aber die einfachste Implementierung in Chrome erfordert es. In Firefox ist es optional. Andere Browser erfordern es möglicherweise in Zukunft.

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 als einmalige Aufgabe. Die Kombination aus privatem und öffentlichem Schlüssel wird als Anwendungsserverschlüssel bezeichnet. Möglicherweise werden sie auch als VAPID-Schlüssel bezeichnet. VAPID ist die Spezifikation, die diesen Authentifizierungsprozess definiert.
  • Wenn Sie einen Client über Ihren JavaScript-Code für Push-Benachrichtigungen abonnieren, geben Sie Ihren öffentlichen Schlüssel an. Wenn der Push-Dienst einen endpoint für das Gerät generiert, wird der angegebene öffentliche Schlüssel mit dem 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, authentifiziert er die signierten Informationen mit dem gespeicherten öffentlichen Schlüssel. 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 Spezifikation für Web-Push-Protokollanfragen 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 (Time-to-Live, TTL) einer Nachricht, die definiert, wie lange der Push-Dienst versuchen soll, eine Nachricht zuzustellen.
  • Die Dringlichkeit der Nachricht, die nützlich ist, wenn der Push-Dienst die Akkulaufzeit des Clients schont, indem er nur Nachrichten mit hoher Priorität zustellt.
  • Das Thema einer Nachricht, das alle ausstehenden Nachrichten mit demselben Thema durch die neueste Nachricht ersetzt.

Gesendete Nachrichten als Benachrichtigungen empfangen und anzeigen

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

  1. Der Client ist online und der Push-Dienst stellt die Push-Nachricht zu.
  2. Die Nachricht läuft ab.

Wenn ein Clientbrowser eine gesendete Nachricht empfängt, entschlüsselt er die Daten der Push-Nachricht und sendet ein push-Ereignis an Ihren Service 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.

1. Die Nachricht geht auf dem Gerät ein. 2. Der Browser aktiviert den Service Worker. 3. Das Push-Ereignis wird gesendet.

Weitere Informationen

Code labs