So funktioniert Push

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

Die drei wichtigsten Schritte zur Implementierung von Push-Mitteilungen sind:

1. Fügen Sie die clientseitige Logik hinzu, um einen Nutzer für Push-Mitteilungen zu registrieren (d. h. das JavaScript und die Benutzeroberfläche in Ihrer Webanwendung, die einen Nutzer für Push-Mitteilungen registriert).
2. Der API-Aufruf von Ihrem Back-End/Ihrer Anwendung, der eine Push-Nachricht an das Gerät eines Nutzers auslöst.
3. Die JavaScript-Datei des Dienst-Workers, die ein „Push-Ereignis“ empfängt, wenn die Push-Nachricht auf dem Gerät eintrifft. In diesem JavaScript-Code können Sie eine Benachrichtigung anzeigen.

Sehen wir uns die einzelnen Schritte etwas genauer an.

Schritt 1: Clientseitig

Der erste Schritt besteht darin, einen Nutzer zu „abonnieren“, um Nachrichten zu senden.

Es sind zwei Dinge erforderlich, um einen Nutzer zu abonnieren. Zuerst muss die Berechtigung des Nutzers eingeholt werden, ihm Push-Nachrichten zu senden. Zweitens: PushSubscription vom Browser abrufen.

Ein PushSubscription enthält alle Informationen, die wir benötigen, um diesem Nutzer eine Push-Nachricht zu senden. Sie können sich das als eine Art ID für das Gerät des Nutzers vorstellen.

All dies geschieht in JavaScript mit der Push API.

Bevor du einen Nutzer abonnierst, musst du eine Reihe von „Anwendungsserverschlüsseln“ generieren. Dazu kommen wir später.

Die Anwendungsserverschlüssel, auch VAPID-Schlüssel genannt, sind für jeden Server eindeutig. Sie ermöglichen es einem Push-Dienst, zu erfahren, welcher Anwendungsserver einen Nutzer abonniert hat, und dafür zu sorgen, dass es sich um denselben Server handelt, der die Push-Nachrichten an diesen Nutzer auslöst.

Nachdem du den Nutzer abonniert und eine PushSubscription hast, musst du die PushSubscription-Details an dein Backend/Server senden. Auf Ihrem Server speichern Sie dieses Abo in einer Datenbank und senden damit eine Push-Nachricht an diesen Nutzer.

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 ausführen. Dieser API-Aufruf würde enthalten, welche Daten gesendet werden sollen, an wen die Nachricht gesendet werden soll und welche Kriterien für das Senden der Nachricht gelten. Normalerweise wird dieser API-Aufruf von Ihrem Server ausgeführt.

Hier sind einige Fragen, die Sie sich vielleicht stellen könnten:

• Wer und was ist der Push-Dienst?
• Wie sieht die API aus? Ist es 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. Ist der Browser offline, wird die Nachricht in die Warteschlange gestellt, bis der Browser online ist.

Jeder Browser kann jeden beliebigen Push-Dienst verwenden. Entwickler haben darauf keinen Einfluss. Das ist kein Problem, da jeder Push-Dienst den denselben API-Aufruf erwartet. Das bedeutet, dass Sie sich nicht darum kümmern müssen, wer der Push-Dienst ist. Sie müssen nur dafür sorgen, dass Ihr API-Aufruf gültig ist.

Die URL, über die eine Push-Nachricht ausgelöst wird (d. h. die URL für den Push-Dienst), finden Sie in einem PushSubscription im Wert endpoint.

Unten findest du ein Beispiel für die Werte, die du von einer PushSubscription erhältst:

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

Der Endpunkt lautet 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 und wird mit „eine-art-von-eindeutiger-id-1234“ angegeben. Wenn Sie anfangen, mit Push zu arbeiten, 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 ein API-Aufruf an einen Push-Dienst erfolgt.

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

Was kann die API?

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

Die Daten, die Sie mit einer Push-Nachricht senden, müssen verschlüsselt sein. Das verhindert, dass Push-Dienste, die von Dritten betrieben werden können, die mit der Push-Nachricht gesendeten Daten einsehen können. Das ist wichtig, da der Browser entscheidet, welchen Push-Dienst er verwendet. Das könnte die Tür für Browser öffnen, die einen nicht sicheren Push-Dienst verwenden.

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 ist und der Push-Dienst die Nachrichten zustellen kann. In den Anweisungen, die Sie dem Push-Dienst geben können, wird festgelegt, wie die Push-Nachricht in die Warteschlange gestellt wird.

Die Anleitung enthält Details wie:

• Die Gültigkeitsdauer einer Push-Nachricht. Damit wird definiert, wie lange eine Nachricht in die Warteschlange gestellt werden soll, 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 verlängert, indem er nur Nachrichten mit hoher Priorität sendet.

• Geben Sie einer Push-Nachricht einen „Themennamen“, durch den alle ausstehenden Nachrichten durch diese neue Nachricht ersetzt werden.

Schritt 3: Push-Ereignis auf dem Gerät des Nutzers

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

1. Das Gerät wird online geschaltet und der Push-Dienst stellt die Nachricht zu.
2. 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 sendet ein push-Ereignis in Ihrem Service Worker.

Ein Service Worker ist eine "spezielle" JavaScript-Datei. Der Browser kann dieses JavaScript ausführen, ohne dass Ihre Seite geöffnet ist. Es kann dieses JavaScript sogar ausführen, wenn der Browser geschlossen ist. Ein Service Worker verfügt außerdem über APIs wie Push, die auf der Webseite nicht verfügbar sind (d.h. APIs, die außerhalb eines Service Worker-Skripts nicht verfügbar sind).

Im Push-Ereignis des Service Workers können Sie alle Hintergrundaufgaben ausführen. Du kannst Analyseaufrufe durchführen, Seiten im Offline-Cache speichern und Benachrichtigungen anzeigen.

Das ist der gesamte Ablauf für Push-Mitteilungen.

Weitere Informationen

• Web-Push-Benachrichtigungen – Übersicht
• Funktionsweise von Push-Benachrichtigungen
• Nutzer abonnieren
• Berechtigungs-UX
• Nachrichten mit Web-Push-Bibliotheken senden
• Web Push Protocol
• Umgang mit Push-Ereignissen
• Benachrichtigungen anzeigen
• Benachrichtigungsverhalten
• Gängige Benachrichtigungsmuster
• Häufig gestellte Fragen zu Push-Benachrichtigungen
• Häufige Probleme und Fehler melden

Codelabs

• Push-Benachrichtigungsclient erstellen
• Push-Benachrichtigungsserver erstellen