So funktioniert Push

Matt Gaunt
X Startseite

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, haben Sie dann eine Vorstellung davon, wie und warum sie wichtig sind.

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 können Sie eine Benachrichtigung anzeigen.

Sehen wir uns die einzelnen Schritte genauer an.

Schritt 1: Clientseite

Der erste Schritt besteht darin, einen Nutzer für Push-Mitteilungen zu registrieren.

Für die Aboverknüpfung eines Nutzers sind zwei Dinge erforderlich. Sie müssen zuerst die Berechtigung des Nutzers einholen, 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.

Unterstützte Browser

  • Chrome: 42.
  • Edge: 17.
  • Firefox: 44.
  • Safari: 16.

Quelle

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-ID erhalten hast, musst du die PushSubscription-Details an dein Backend / Server senden. Sie speichern dieses Abo auf Ihrem Server in einer Datenbank und verwenden es, um eine Push-Nachricht an diesen Nutzer zu senden.

Senden Sie die 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 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.

Sie könnten sich beispielsweise fragen:

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

Jeder Browser kann jeden beliebigen Push-Dienst verwenden. Entwickler haben darauf keinen Einfluss. Das ist kein Problem, da jeder Push-Dienst den gleichen 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 endpoint-Wert.

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 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 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 sehen uns an, welche Bibliotheken diesen API-Aufruf für uns ausführen können und wie wir ihn selbst durchführen.

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 senden kann. Die Anweisungen, die Sie dem Push-Dienst geben, legen fest, wie die Push-Nachricht in die Warteschlange gestellt wird.

Die Anleitung enthält Details wie:

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

  • Legen Sie die Dringlichkeit der Nachricht fest. Das ist nützlich, wenn der Push-Dienst den Akku des Nutzers schont, indem nur Nachrichten mit hoher Priorität gesendet werden.

  • Geben Sie einer Push-Nachricht einen „Themennamen“, durch den alle ausstehenden Nachrichten durch diese 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: 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 sie 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 Dienst-Worker ist eine „besondere“ 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 hat auch APIs wie Push, die nicht auf der Webseite verfügbar sind (d.h. APIs, die nicht außerhalb eines Service Worker-Scripts verfügbar sind).

Im Push-Ereignis des Service Workers können Sie alle 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, erhält Ihr Service Worker ein Push-Ereignis.

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

Weitere Informationen

Code labs