So funktioniert Push

Matt Gaunt

Bevor wir uns mit der API befassen, sehen wir uns Push-Benachrichtigungen 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-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, die einen Nutzer für Push-Benachrichtigungen registrieren).
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 der Push auf dem Gerät ankommt. In diesem JavaScript können Sie eine Benachrichtigung anzeigen lassen.

Sehen wir uns die einzelnen Schritte genauer an.

Schritt 1: Clientseite

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

Für das Abonnieren eines Nutzers sind zwei Dinge erforderlich. Zuerst müssen Sie die Berechtigung des Nutzers einholen, ihm Push-Benachrichtigungen zu senden. Zweitens: Abrufen eines PushSubscription aus dem Browser.

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

Dies geschieht in JavaScript mit der Push API.

Browser Support

• 42
• 17
• 44
• 16

Source

Bevor Sie einen Nutzer abonnieren, müssen Sie einen Satz „Anwendungsserverschlüssel“ generieren. Darauf gehen wir später ein.

Die Anwendungsserverschlü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 abonniert hat, und sorgen dafür, dass derselbe Server die Push-Benachrichtigungen an diesen Nutzer auslöst.

Sobald du den Nutzer abonniert hast und ein PushSubscription-Objekt hast, musst du die PushSubscription-Details an dein Backend bzw. deinen Server senden. Auf Ihrem Server speichern Sie dieses Abo in einer Datenbank und verwenden es, um eine Push-Nachricht an diesen Nutzer zu senden.

Schritt 2: Push-Benachrichtigung 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 die zu sendenden Daten, den Empfänger der Nachricht und alle Kriterien für das Senden der Nachricht enthalten. Normalerweise wird dieser API-Aufruf von Ihrem Server aus ausgeführt.

Vielleicht stellen Sie sich folgende 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-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. Entwickler haben darauf keinen Einfluss. 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 dafür sorgen, dass Ihr API-Aufruf gültig ist.

Um die richtige URL zum Auslösen einer Push-Nachricht (also die URL für den Push-Dienst) zu erhalten, müssen Sie sich nur den Wert endpoint in einem PushSubscription ansehen.

Hier 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 wäre „random-push-service.com“ und jeder Endpunkt ist für einen Nutzer eindeutig, was durch „some-kind-of-unique-id-1234“ angegeben wird. Wenn Sie mit Push-Vorgängen arbeiten, werden Sie dieses Muster bemerken.

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

Wie sieht die API aus?

Ich habe erwähnt, dass jeder Web-Push-Dienst denselben API-Aufruf erwartet. Diese API ist das Web Push Protocol. Es handelt sich um einen IETF-Standard, der definiert, wie ein API-Aufruf an einen Push-Dienst erfolgt.

Für den API-Aufruf müssen bestimmte Header festgelegt werden 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 ihn selbst ausführen 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. Dadurch wird verhindert, dass Push-Dienste, die von beliebigen Personen stammen können, die mit der Push-Nachricht gesendeten Daten einsehen können. Das ist wichtig, da der Browser entscheidet, welcher Push-Dienst verwendet wird. Das könnte dazu führen, dass 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 reiht die Nachricht in die Warteschlange ein. Diese Nachricht bleibt in der Warteschlange, bis das Gerät des Nutzers online ist und der Push-Dienst die Nachrichten zustellen kann. Die Anweisungen, die Sie dem Push-Dienst geben können, definieren, wie die Push-Nachricht in die Warteschlange gestellt wird.

Die Anleitung enthält Details wie:

• Die Gültigkeitsdauer einer Push-Nachricht. Damit wird festgelegt, wie lange eine Nachricht in die Warteschlange gestellt werden soll, bevor sie entfernt und nicht zugestellt wird.

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

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

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

Nachdem wir eine Push-Nachricht gesendet haben, wird sie vom Push-Dienst auf seinem Server gespeichert, bis eines der folgenden Ereignisse eintritt:

1. Das Gerät geht online und der Push-Dienst stellt die Nachricht zu.
2. Die Nachricht läuft ab. In diesem Fall entfernt der Push-Dienst die Nachricht aus seiner Warteschlange und sie wird nicht zugestellt.

Wenn der Push-Dienst eine Nachricht zustellt, empfängt der Browser die Nachricht, entschlüsselt alle Daten und sendet ein push-Ereignis an Ihren Service Worker.

Ein Service Worker ist eine „spezielle“ JavaScript-Datei. Der Browser kann dieses JavaScript ausführen, ohne dass deine Seite geöffnet ist. Dieses JavaScript kann sogar ausgeführt werden, 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 beliebige Hintergrundaufgaben ausführen. Sie können Analyseaufrufe ausführen, Seiten offline im Cache speichern und Benachrichtigungen anzeigen.

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

Weitere Informationen

• Web-Push-Benachrichtigungen – Übersicht
• So funktioniert Push
• Nutzer abonnieren
• UX für Berechtigungen
• Nachrichten mit Web-Push-Bibliotheken senden
• Web-Push-Protokoll
• Push-Ereignisse verarbeiten
• Benachrichtigung anzeigen
• Benachrichtigungsverhalten
• Häufige Benachrichtigungsmuster
• Häufig gestellte Fragen zu Push-Benachrichtigungen
• Häufige Probleme und Fehler melden

Code labs

• Push-Benachrichtigungsclient erstellen
• Push-Benachrichtigungsserver erstellen