Push-Benachrichtigungen

Eine Übersicht darüber, was Push-Benachrichtigungen sind, welche Vorteile sie bieten und wie sie funktionieren.

Kayce Basques
Matt Gaunt
X Startseite

Was sind Push-Benachrichtigungen?

Mit Push-Nachrichten können Sie Ihre auch wenn sie Ihre Website nicht nutzen. Sie werden als Push bezeichnet. weil Sie mit „Push“ Informationen für Ihre Nutzer bereitzustellen, auch wenn sie nicht aktiv. Vergleich Push mit Pull-Technologie Konzept weiterführen.

Bei Benachrichtigungen werden dem Nutzer kleine Informationen zu einem bestimmten Thema präsentiert. Websites können Benachrichtigungen, um Nutzer über wichtige, zeitkritische Ereignisse oder Aktionen zu informieren die die Nutzenden ausführen müssen. Das Design von Benachrichtigungen variiert je nach Plattform:

<ph type="x-smartling-placeholder">
</ph> Beispiele für Benachrichtigungen unter macOS und Android
Beispiele für Benachrichtigungen unter macOS und Android

Push-Nachrichten und -Benachrichtigungen sind zwei unterschiedliche Technologien, die sich gegenseitig ergänzen. Push ist die Technologie zum Senden von Nachrichten von Ihrem Server an Nutzer, selbst wenn Nutzer, die Ihre Website nicht aktiv nutzen. Benachrichtigungen sind die Technologie für die auf dem Gerät des Nutzers angezeigt werden. Es ist möglich, Benachrichtigungen ohne Push-Nachrichten. An einem Tag kann es auch möglich sein, Push-Nachrichten ohne an den Nutzer gerichtete Benachrichtigungen (stumme Push-Nachrichten), aber Browser ist dies derzeit nicht. In der Praxis werden sie normalerweise zusammen verwendet. Ein technisch nicht versierter Nutzer wird wahrscheinlich nicht den Unterschied zwischen Push-Benachrichtigungen Nachrichten und Benachrichtigungen. In dieser Sammlung, wenn Push-Benachrichtigungen. Damit ist die Kombination und als Benachrichtigung angezeigt. Wenn wir von Push-Nachrichten sprechen, damit die Technologie eigenständig vorangetrieben wird. Wenn wir von Benachrichtigungen beziehen wir uns auf die Benachrichtigungstechnologie.

Vorteile von Push-Benachrichtigungen

  • Für Nutzer sind Push-Benachrichtigungen eine Möglichkeit, zeitnah, relevant und genaue Informationen.
  • Für Sie als Websiteinhaber sind Push-Benachrichtigungen eine Möglichkeit, Interaktion.

Wie funktionieren Push-Benachrichtigungen?

Die wichtigsten Schritte zur Implementierung von Push-Benachrichtigungen sind folgende:

  1. Hinzufügen von Clientlogik, um den Nutzer um die Berechtigung zum Senden von Push-Benachrichtigungen zu bitten und Daten der Client-ID zur Speicherung in einer Datenbank an Ihren Server gesendet.
  2. Serverlogik hinzufügen, um Nachrichten an Clientgeräte zu senden
  3. Hinzufügen von Clientlogik zum Empfangen von Nachrichten, die an das Gerät gesendet wurden und als Benachrichtigungen anzeigen.

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

Berechtigung zum Senden von Push-Benachrichtigungen erhalten

Zuerst muss Ihre Website die Zustimmung des Nutzers zum Senden von Push-Benachrichtigungen einholen. Dies sollte durch eine Nutzergeste ausgelöst werden, z. B. durch Klicken auf eine Schaltfläche Ja neben einem Do you want to receive push notifications?-Prompt. Nach dieser Bestätigung Rufen Sie Notification.requestPermission() auf. Das Betriebssystem oder Browser auf dem Gerät des Nutzers wahrscheinlich eine Art Benutzeroberfläche, mit der offiziell bestätigt werden kann, dass der Nutzer möchte Push-Benachrichtigungen aktivieren. Diese Benutzeroberfläche variiert je nach Plattform.

Client für Push-Benachrichtigungen abonnieren

Nachdem Sie die Berechtigung erhalten haben, muss Ihre Website Push-Benachrichtigungen für den Nutzer zu abonnieren. Dies geschieht über JavaScript, Push API Du musst einen öffentlichen Authentifizierungsschlüssel angeben während des Abovorgangs. Darauf erfahren Sie später mehr. Nachher Wenn du den Aboprozess einleitest, sendet der Browser eine Netzwerkanfrage zu einem als Push-Dienst bezeichneten Webdienst, über den Sie auch später mehr erfahren werden.

Unter der Annahme, dass das Abonnement erfolgreich war, gibt der Browser eine PushSubscription -Objekt enthält. Sie müssen diese Daten langfristig speichern. Dazu werden die Informationen an einen von Ihnen gesteuerten Server gesendet, und der Server diese dann in einer Datenbank speichert.

Berechtigung zum Senden von Push-Nachrichten anfordern PushSubscription abrufen. Senden PushSubscription auf Ihren Server zu übertragen.

Push-Nachricht senden

Ihr Server sendet die Push-Nachricht nicht direkt an einen Client. A Push-Dienst. Ein Push-Dienst ist ein Webdienst, der von Ihrer den Anbieter des Browsers. Um eine Push-Benachrichtigung an einen Kunden zu senden, müssen Sie um eine Webdienstanfrage an einen Push-Dienst zu senden. Die Webdienstanfrage wird als Web-Push-Protokollanfrage bezeichnet. Die Die Web-Push-Protokoll-Anfrage sollte Folgendes enthalten:

  • Welche Daten in der Mitteilung enthalten sein sollen.
  • An welchen Client soll die Nachricht gesendet werden?
  • Anweisungen dazu, wie der Push-Dienst die Nachricht übermitteln soll. Zum Beispiel haben Sie kann angeben, dass der Push-Dienst nicht mehr versuchen soll, die Nachricht zu senden, nach 10 Minuten.

Normalerweise stellen Sie die Web-Push-Protokollanforderung über einen von Ihnen gesteuerten Server vor. Natürlich muss Ihr Server nicht die unformatierte Webdienstanfrage erstellen. selbst. Es gibt Bibliotheken, die dies für Sie übernehmen, z. B. die web-push-libs Der zugrunde liegende Mechanismus eine Webdienstanfrage über HTTP.

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

Der Push-Dienst empfängt Ihre Anfrage, authentifiziert sie und leitet die Push-Anfrage weiter. an den entsprechenden Client senden. Ist der Client-Browser offline, wird die Push-Benachrichtigung -Dienst stellt die Push-Nachricht in die Warteschlange, bis der Browser online geht.

Jeder Browser verwendet einen beliebigen Push-Dienst. Sie als Website-Entwickler keine Kontrolle darüber haben. Dies ist kein Problem, da das Web-Push-Protokoll standardisiert ist. Mit anderen Worten: Es spielt keine Rolle, welchen Push-Dienst der Browseranbieter hat. verwenden. 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 müssen als Stream von Byte gesendet werden.

Sie müssen jedoch darauf achten, das Web-Push-Protokoll zu senden, an den richtigen Push-Dienst senden. Die PushSubscription-Daten, die vom Browser, der während des Abonnementvorgangs an Sie zurückgegeben wird, bietet Folgendes: 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 zur endpoint sind Client-ID-Informationen, mit denen der Push-Dienst ermitteln kann, an welchen Client die Nachricht gesendet werden soll.

Die keys werden zur 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. Dadurch wird verhindert, dass der Push-Dienst die Daten, die Sie an den Client senden, nicht mehr sehen kann. Der Anbieter des Browsers entscheidet, welcher Push-Dienst zu verwenden ist, kann der Push-Dienst theoretisch unsicher oder unsicher sein. Ihr Server muss Das in der PushSubscription angegebene keys, um das Web-Push-Protokoll zu verschlüsseln -Anfragen.

Anfragen für das Web-Push-Protokoll signieren

Mit dem Push-Dienst können Sie verhindern, dass andere Personen Nachrichten an Ihr Nutzenden. Technisch gesehen ist das nicht nötig, aber die einfachste Implementierung Für Chrome ist dies erforderlich. Bei Firefox ist dies optional. Für andere Browser ist dies möglicherweise erforderlich zu erhalten.

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

  • Sie generieren den privaten und öffentlichen Schlüssel als einmalige Aufgabe. Die Kombination des privaten und öffentlichen Schlüssels wird als Anwendungsserverschlüssel. Sie werden auch VAPID Schlüssel. VAPID ist die Spezifikation, die diesen Authentifizierungsprozess definiert.
  • Wenn Sie einen Client für Push-Benachrichtigungen über Ihren JavaScript-Code abonnieren, geben Sie Ihren öffentlichen Schlüssel an. Wenn der Push-Dienst ein endpoint generiert für das Gerät verknüpft, wird der bereitgestellte öffentliche Schlüssel mit dem endpoint verknüpft.
  • Wenn Sie eine Web-Push-Protokollanfrage senden, signieren Sie einige JSON-Informationen durch Ihren privaten Schlüssel.
  • Wenn der Push-Dienst Ihre Web-Push-Protokollanfrage empfängt, verwendet er das gespeicherte öffentlichen Schlüssel zum Authentifizieren der signierten Informationen. Wenn die Signatur gültig ist erkennt der Push-Dienst, dass die Anfrage von einem Server mit der passenden privaten Schlüssel hinzufügen.

Zustellung der Push-Nachricht anpassen

In der Spezifikation für die Web-Push-Protokollanfrage werden auch Parameter definiert, mit denen Sie anpassen, 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 eine Nachricht zu übermitteln.
  • Die Dringlichkeit der Nachricht, die nützlich ist, wenn der Push-Dienst die Nachricht beibehält Akkuleistung des Clients, da nur Nachrichten mit hoher Priorität gesendet werden.
  • Das Thema einer Nachricht, das alle ausstehenden Nachrichten zum selben Thema ersetzt mit der neuesten Nachricht.

Push-Nachrichten empfangen und als Benachrichtigungen anzeigen lassen

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

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

Wenn ein Clientbrowser eine Push-Nachricht empfängt, wird sie entschlüsselt. Daten und sendet ein push-Ereignis an Ihren Dienst Worker. Ein Service Worker ist JavaScript-Code, der im Hintergrund ausgeführt werden kann, nicht geöffnet oder der Browser geschlossen ist. Im Ereignis push Ihres Service Workers Handler, den Sie ServiceWorkerRegistration.showNotification() aufrufen, um die Informationen als Benachrichtigung.

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

Weitere Informationen

Code labs