So funktioniert Push

Bevor wir uns mit der API beschäftigen, sehen wir uns Push-Benachrichtigungen von Anfang bis Ende an. Wenn wir später die einzelnen Themen oder APIs durchgehen, wissen Sie, wie und warum sie wichtig sind.

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

1. Hinzufügen der clientseitigen Logik, um einen Nutzer für Push-Benachrichtigungen zu registrieren (d.h. das JavaScript und die Benutzeroberfläche in Ihrer Web-App, mit denen ein Nutzer für Push-Benachrichtigungen registriert wird).
2. Der API-Aufruf von Ihrem Back-End / Ihrer Anwendung, der eine Push-Benachrichtigung an das Gerät eines Nutzers auslöst.
3. Die JavaScript-Datei des Service Workers, die ein „Push-Ereignis“ empfängt, wenn die Push-Benachrichtigung auf dem Gerät eingeht. In diesem JavaScript können Sie eine Benachrichtigung anzeigen.

Sehen wir uns die einzelnen Schritte etwas genauer an.

Schritt 1: Clientseite

Im ersten Schritt wird ein Nutzer für Push-Benachrichtigungen registriert.

Dazu sind zwei Dinge erforderlich. Zuerst muss der Nutzer die Berechtigung erteilen, ihm Push-Benachrichtigungen zu senden. Zweitens muss der Browser eine PushSubscription abrufen.

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

Das alles geschieht in JavaScript mit der Push API.

Bevor Sie einen Nutzer registrieren, müssen Sie eine Reihe von „Anwendungsserver-Schlüsseln“ generieren, die wir später behandeln.

Die Anwendungsserver-Schlüssel, auch VAPID-Schlüssel genannt, sind für Ihren Server eindeutig. Sie ermöglichen es einem Push-Dienst, zu erkennen, welcher Anwendungsserver einen Nutzer registriert hat, und sicherzustellen, dass derselbe Server die Push-Benachrichtigungen an diesen Nutzer auslöst.

Sobald Sie den Nutzer registriert haben und eine PushSubscription vorhanden ist, müssen Sie die Details der PushSubscription an Ihr Back-End / Ihren Server senden. Auf Ihrem Server speichern Sie dieses Abo in einer Datenbank und verwenden es, um eine Push-Benachrichtigung an diesen Nutzer zu senden.

Schritt 2: Push-Benachrichtigung senden

Wenn Sie eine Push-Benachrichtigung an Ihre Nutzer senden möchten, müssen Sie einen API-Aufruf an einen Push-Dienst senden. Dieser API-Aufruf enthält die zu sendenden Daten, den Empfänger der Nachricht und alle Kriterien zum Senden der Nachricht. Normalerweise erfolgt dieser API-Aufruf von Ihrem Server aus.

Einige Fragen, die Sie sich vielleicht stellen:

• 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-Benachrichtigung an den entsprechenden Browser. Wenn der Browser offline ist, wird die Nachricht in die Warteschlange gestellt, bis der Browser wieder online ist.

Jeder Browser kann einen beliebigen Push-Dienst verwenden. Das können Entwickler nicht beeinflussen. Das ist kein Problem, da jeder Push-Dienst denselben API-Aufruf erwartet. Sie müssen sich also nicht darum kümmern, wer der Push-Dienst ist. Sie müssen nur sicherstellen, dass Ihr API-Aufruf gültig ist.

Die entsprechende URL zum Auslösen einer Push-Benachrichtigung (d.h. die URL für den Push-Dienst) finden Sie im Wert endpoint in einer PushSubscription.

Unten sehen Sie ein Beispiel für die Werte, die Sie von einer PushSubscription erhalten:

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

Der Endpunkt ist in diesem Fall https://random-push-service.com/some-kind-of-unique-id-1234/v2/. Der Push-Dienst ist „random-push-service.com“ und jeder Endpunkt ist für einen Nutzer eindeutig, angegeben mit „some-kind-of-unique-id-1234“. Wenn Sie mit Push-Benachrichtigungen 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-Protokoll. Es ist ein IETF-Standard, der definiert, wie Sie einen API-Aufruf an einen Push-Dienst senden.

Für den API-Aufruf müssen bestimmte Header festgelegt werden und die Daten müssen ein Byte-Stream sein. Wir sehen 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 Anweisungen, wie die Nachricht gesendet werden soll.

Die Daten, die Sie mit einer Push-Benachrichtigung senden, müssen verschlüsselt sein. So wird verhindert, dass Push-Dienste, die von jedem stammen könnten, die mit der Push-Benachrichtigung gesendeten Daten einsehen können. Das ist wichtig, da der Browser entscheidet, welcher Push-Dienst verwendet wird. Dadurch könnten Browser einen Push-Dienst verwenden, der nicht sicher ist.

Wenn Sie eine Push-Benachrichtigung 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 senden kann. Die Anweisungen, die Sie dem Push-Dienst geben können, definieren, wie die Push-Benachrichtigung in die Warteschlange gestellt wird.

Die Anweisungen enthalten Details wie:

• Die Gültigkeitsdauer einer Push-Benachrichtigung. Dadurch wird festgelegt, wie lange eine Nachricht in der Warteschlange bleiben soll, bevor sie entfernt und nicht gesendet wird.

• Definieren Sie die Dringlichkeit der Nachricht. Das 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-Benachrichtigung einen „Themennamen“, der alle ausstehenden Nachrichten durch diese neue Nachricht ersetzt.

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

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

1. Das Gerät ist online und der Push-Dienst sendet die Nachricht.
2. Die Nachricht läuft ab. In diesem Fall entfernt der Push-Dienst die Nachricht aus der Warteschlange und sie wird nie gesendet.

Wenn der Push-Dienst eine Nachricht sendet, 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. Er kann dieses JavaScript sogar ausführen, wenn der Browser geschlossen ist. Ein Service Worker hat auch APIs wie Push, die auf der Webseite nicht verfügbar sind (d.h. APIs, die nicht außerhalb eines Service Worker-Skripts verfügbar sind).

Im „Push“-Ereignis des Service Workers können Sie alle Hintergrundaufgaben ausführen. Sie können Analytics-Aufrufe senden, Seiten offline im Cache speichern und Benachrichtigungen anzeigen.

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

Weitere Informationen

• Übersicht über Web-Push-Benachrichtigungen
• Funktionsweise von Push-Benachrichtigungen
• Nutzer registrieren
• UX für Berechtigungen
• Nachrichten mit Web-Push-Bibliotheken senden
• Web-Push-Protokoll
• Umgang mit Push-Ereignissen
• Benachrichtigung anzeigen
• Verhalten von Benachrichtigungen
• Häufige Benachrichtigungsmuster
• Häufig gestellte Fragen zu Push-Benachrichtigungen
• Häufige Probleme und Fehler melden

Code labs

• Push-Benachrichtigungsclient erstellen
• Push-Benachrichtigungsserver erstellen