Diese Seite wurde von der Cloud Translation API übersetzt.

So funktioniert Push

Matt Gaunt

Bevor wir uns mit der API befassen, schauen wir uns den Push-Vorgang von Anfang bis Ende an. Wenn wir später einzelne Themen oder APIs durchgehen, werden Sie eine Vorstellung davon erhalten, wie und warum das wichtig ist.

Die drei wichtigsten Schritte zur Implementierung von Push sind:

Hinzufügen der clientseitigen Logik zum Abonnieren eines Nutzers per Push (d.h. dem JavaScript und der Benutzeroberfläche in Ihrer Webanwendung, die einen Nutzer für Push-Nachrichten registrieren).
Der API-Aufruf von Ihrem Back-End / Ihrer Anwendung, der eine Push-Nachricht an das Gerät eines Nutzers auslöst.
Die Service Worker-JavaScript-Datei, die ein Push-Ereignis empfängt, wenn der Push auf dem Gerät eingeht. In diesem JavaScript-Code können Sie eine Benachrichtigung anzeigen lassen.

Sehen wir uns die einzelnen Schritte etwas genauer an.

Schritt 1: Clientseitig

Der erste Schritt besteht darin, einen Nutzer für Push-Benachrichtigungen zu „abonnieren“.

Für das Abonnieren eines Nutzers sind zwei Dinge erforderlich. Zuerst holen Sie die Berechtigung vom Nutzer ein, um ihm Push-Nachrichten zu senden. Zweitens: Abrufen eines PushSubscription vom Browser.

Ein PushSubscription enthält alle Informationen, die zum Senden einer Push-Nachricht an diesen Nutzer erforderlich sind. Sie können sich dies als eine ID für das Gerät dieses Nutzers vorstellen.

Dies geschieht in JavaScript mit der Push API.

Unterstützte Browser

Quelle

Bevor Sie einen Nutzer abonnieren, müssen Sie einen Satz von Anwendungsserverschlüsseln generieren. Dazu kommen wir später.

Die Anwendungsserverschlüssel, die auch als VAPID-Schlüssel bezeichnet werden, gelten nur für Ihren Server. Sie ermöglichen einem Push-Dienst, zu ermitteln, welcher Anwendungsserver einen Nutzer abonniert hat, und sorgt dafür, dass es sich um denselben Server handelt, der die Push-Nachrichten an diesen Nutzer auslöst.

Sobald Sie den Nutzer abonniert haben und eine PushSubscription haben, müssen Sie die PushSubscription-Details an Ihr Back-End / Ihren Server senden. Sie speichern dieses Abo auf Ihrem Server in einer Datenbank und senden dort eine Push-Nachricht an diesen Nutzer.

Senden Sie PushSubscription an Ihr Backend.

Schritt 2: Push-Nachricht senden

Wenn Sie eine Push-Nachricht an Ihre Nutzer senden möchten, müssen Sie einen API-Aufruf an einen Push-Dienst senden. Dieser API-Aufruf würde angeben, welche Daten gesendet werden sollen, an wen die Nachricht gesendet werden soll und welche Kriterien zum Senden der Nachricht vorliegen. Normalerweise wird dieser API-Aufruf von Ihrem Server ausgeführt.

Hier sind einige Fragen, die Sie sich vielleicht stellen:

Wer und was ist der Push-Dienst?
Wie sieht die API aus? Handelt es sich um JSON, XML oder etwas anderes?
Was kann die API?

Wer und was ist der Push-Dienst?

Ein Push-Dienst empfängt eine Netzwerkanfrage, validiert sie und sendet eine Push-Nachricht an den entsprechenden Browser. Wenn der Browser offline ist, wird die Nachricht in die Warteschlange gestellt, bis der Browser online ist.

Jeder Browser kann jeden beliebigen Push-Dienst verwenden. Entwicklungsteams haben keine Kontrolle darüber. Das ist kein Problem, da jeder Push-Dienst denselben API-Aufruf erwartet. Sie müssen also nicht dafür sorgen, wer der Push-Dienst ist. Sie müssen nur sicherstellen, dass Ihr API-Aufruf gültig ist.

Um die entsprechende URL zum Auslösen einer Push-Nachricht zu ermitteln (d.h. die URL für den Push-Dienst), müssen Sie sich nur den endpoint-Wert in einer PushSubscription ansehen.

Im Folgenden finden Sie ein Beispiel für die Werte, die Sie von einem PushSubscription erhalten:

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

Der endpoint ist in diesem Fall [https://Random-push-service.com/some-kind-of-unique-id-1234/v2/]. Der Push-Dienst wäre "Random-push-service.com" und jeder Endpunkt ist für einen Nutzer eindeutig, was durch "eine-art-eindeutige-id-1234" angegeben wird. Wenn Sie mit der Push-Funktion beginnen, werden Sie dieses Muster bemerken.

Die Schlüssel im Abo werden später behandelt.

Wie sieht die API aus?

Ich habe bereits erwähnt, dass jeder Web-Push-Dienst denselben API-Aufruf erwartet. Diese API ist das Web Push Protocol. Es ist ein IETF-Standard, der definiert, wie Sie einen API-Aufruf an einen Push-Dienst ausführen.

Für den API-Aufruf müssen bestimmte Header festgelegt sein und die Daten müssen ein Bytestream sein. Wir sehen uns Bibliotheken an, die diesen API-Aufruf für uns ausführen können, und wie wir dies selbst tun können.

Was kann die API?

Die API bietet die Möglichkeit, eine Nachricht mit und ohne Daten an einen Nutzer zu senden. Außerdem enthält sie eine Anleitung, wie die Nachricht gesendet wird.

Die Daten, die Sie mit einer Push-Nachricht senden, müssen verschlüsselt werden. Der Grund dafür ist, dass Push-Dienste, die alle sein könnten, daran gehindert werden, die mit der Push-Nachricht gesendeten Daten einzusehen. Dies ist wichtig, da der Browser entscheidet, welcher Push-Dienst verwendet wird. Dadurch können Browser geöffnet werden, die einen Push-Dienst verwenden, der nicht sicher ist.

Wenn Sie eine Push-Nachricht auslösen, empfängt der Push-Dienst den API-Aufruf und stellt die Nachricht in die Warteschlange. Diese Nachricht bleibt in der Warteschlange, bis das Gerät des Nutzers online geht und der Push-Dienst die Nachrichten zustellen kann. Mit den Anweisungen, die Sie für den Push-Dienst geben können, wird definiert, wie die Push-Nachricht in die Warteschlange gestellt wird.

Die Anweisungen enthalten Details wie:

Die Gültigkeitsdauer einer Push-Nachricht. Damit wird definiert, wie lange eine Nachricht in der Warteschlange stehen muss, bevor sie entfernt und nicht zugestellt wird.
Legen Sie die Dringlichkeit der Nachricht fest. Dies ist nützlich, wenn der Push-Dienst die Akkulaufzeit der Nutzer schont, indem er nur Nachrichten mit hoher Priorität sendet.
Geben Sie einer Push-Nachricht einen Themennamen, durch den alle ausstehenden Nachrichten durch die neue Nachricht ersetzt werden.

Wenn Ihr Server eine Push-Nachricht senden möchte, sendet er eine Web-Push-Protokollanfrage an einen Push-Dienst.

Schritt 3: Ereignis auf das Gerät des Nutzers übertragen

Nachdem wir eine Push-Nachricht gesendet haben, behält der Push-Dienst Ihre Nachricht auf seinem Server, bis eines der folgenden Ereignisse eintritt:

Das Gerät geht online und der Push-Dienst übermittelt die Nachricht.
Die Nachricht läuft ab. In diesem Fall entfernt der Push-Dienst die Nachricht aus der Warteschlange und wird nie zugestellt.

Wenn der Push-Dienst eine Nachricht zustellt, empfängt der Browser die Nachricht, entschlüsselt alle Daten und löst ein push-Ereignis in Ihrem Service Worker aus.

Ein Service Worker ist eine "spezielle" JavaScript-Datei. Der Browser kann diesen JavaScript-Code ausführen, ohne dass die Seite geöffnet wird. Das JavaScript kann sogar beim Schließen des Browsers ausgeführt werden. Ein Service Worker verfügt auch über APIs, die nicht auf der Webseite verfügbar sind (z.B. APIs, die nicht über ein Service Worker-Skript verfügbar sind).

Innerhalb des Service Worker-Ereignisses „push“ können Sie Hintergrundaufgaben ausführen. Sie können Analyseaufrufe ausführen, Seiten offline im Cache speichern und Benachrichtigungen anzeigen.

Wenn eine Push-Nachricht von einem Push-Dienst an das Gerät eines Nutzers gesendet wird, empfängt Ihr Service Worker ein Push-Ereignis

Das war der gesamte Ablauf für Push-Nachrichten.