So funktioniert Push

Bevor wir uns mit der API befassen, sehen wir uns die Übertragung von Anfang bis Ende an. Während wir erfahren Sie, wie und warum es wichtig.

Die drei wichtigsten Schritte zur Implementierung von Push sind:

1. Hinzufügen der clientseitigen Logik zum Abonnieren eines Nutzers zum Pushen (d.h. JavaScript und UI in Ihrem Web-App, die einen Nutzer für Push-Nachrichten registriert).
2. Der API-Aufruf von Ihrem Backend / Ihrer Anwendung, der eine Push-Nachricht an das Gerät eines Nutzers auslöst.
3. Die Service Worker-JavaScript-Datei, die ein "Push-Ereignis" empfangen wird wenn der Anstoß am auf dem Gerät. 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 ist das „Abonnieren“ um Benachrichtigungen zu senden.

Um einen Nutzer zu abonnieren, sind zwei Dinge erforderlich. Zuerst muss der Nutzer die Berechtigung Push-Nachrichten zu senden. Zweitens: ein PushSubscription vom Browser abrufen.

Eine PushSubscription enthält alle Informationen, die wir zum Senden einer Push-Nachricht an diesen Nutzer benötigen. Sie können „irgendwie“ stellen Sie sich dies als ID für das Gerät des Nutzers vor.

Dies erfolgt in JavaScript mit der Push API.

Bevor Sie einen Nutzer abonnieren, „Anwendungsserverschlüssel“, auf die wir später eingehen werden.

Die Anwendungsserverschlüssel, auch VAPID-Schlüssel genannt, sind für Ihren Server eindeutig. Sie ermöglichen ein Push-Dienst, um zu erfahren, welcher Anwendungsserver einen Nutzer abonniert hat, und sicherzustellen, dass es die Push-Nachrichten an diesen Nutzer auslöst.

Sobald du ein Abo für den Nutzer und ein PushSubscription hast, musst du den PushSubscription-Details an dein Backend / Server. Auf Ihrem Server speichern Sie eine Datenbank abonnieren und damit eine Push-Nachricht an diesen Nutzer senden.

Schritt 2: Push-Nachricht senden

Wenn Sie eine Push-Nachricht an Ihre Nutzer senden möchten, müssen Sie einen API-Aufruf an eine Push-Anfrage senden. . Dieser API-Aufruf würde angeben, welche Daten und an wen die Nachricht gesendet werden soll Kriterien für das Senden der Nachricht. 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? Handelt es sich dabei um JSON, XML oder etwas anderes?
• Was kann die API tun?

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 wieder online ist.

Jeder Browser kann jeden beliebigen Push-Dienst verwenden, da die Entwickler keine Kontrolle darüber haben. vorbei. Das ist kein Problem, da jeder Push-Dienst den denselben API-Aufruf erwartet. Bedeutung Es spielt keine Rolle, wer der Push-Dienst ist. Sie müssen nur sicherstellen, dass Ihr API-Aufruf ist gültig.

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

Im Folgenden findest du ein Beispiel für die Werte, die du von einem PushSubscription erhältst:

{
  "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 „zufällige-push-service.de“ und jeder Endpunkt ist für einen Nutzer eindeutig, wie durch 'some-kind-of-unique-id-1234'. 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 die Web-Push-Protokoll: 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 werden und die Daten müssen ein Stream von Byte sein. Wir werden und sehen uns Bibliotheken an, die diesen API-Aufruf für uns ausführen, und wie wir das selbst machen.

Was kann die API tun?

Die API bietet die Möglichkeit, eine Nachricht mit oder ohne Daten an einen Nutzer zu senden, und bietet Anleitung zum Senden der Nachricht

Die mit einer Push-Nachricht gesendeten Daten müssen verschlüsselt sein. Der Grund dafür ist, verhindert, dass Push-Dienste, die irgendwo sein könnten, die mit der Push-Nachricht. Dies ist wichtig, da der Browser entscheidet, welcher Push-Dienst verwenden, wodurch Browser mit einem nicht sicheren Push-Dienst geöffnet werden können.

Wenn Sie eine Push-Nachricht auslösen, empfängt der Push-Dienst den API-Aufruf und stellt die angezeigt. Diese Nachricht bleibt in der Warteschlange, bis das Gerät des Nutzers online ist und die Push-Benachrichtigung die Nachrichten übermitteln können. Die Anweisungen, die Sie dem Push-Dienst geben können, definieren, die Push-Nachricht in die Warteschlange gestellt wird.

Die Anleitung enthält unter anderem folgende Informationen:

• Die Gültigkeitsdauer einer Push-Nachricht. Gibt an, wie lange eine Nachricht in die Warteschlange gestellt werden soll, dass es entfernt und nicht zugestellt wird.

• Definieren Sie die Dringlichkeit der Nachricht. Dies ist nützlich, wenn der Push-Dienst die die Akkulaufzeit durch die Übermittlung von Nachrichten mit hoher Priorität.

• Push-Nachrichten ein „Thema“ zuweisen Name, der alle ausstehenden Nachrichten durch diese neue ersetzt.

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

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

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

Wenn der Push-Dienst eine Nachricht übermittelt, empfängt der Browser die Nachricht und entschlüsselt Daten und lösen ein push-Ereignis im Service Worker aus.

Ein Service Worker ist ein "besonders" JavaScript-Datei. Der Browser kann diesen JavaScript-Code ausführen, ohne dass öffnen. Er kann diesen JavaScript-Code sogar ausführen, wenn der Browser geschlossen wird. Ein Service Worker hat außerdem APIs wie Push-Benachrichtigungen, die nicht auf der Webseite verfügbar sind, d.h. APIs, die nicht auf anderen Webseiten zur Verfügung stehen eines Service Worker-Skripts.

Sie befindet sich im Push-Modus des Service Workers Ereignis, mit dem Sie Hintergrundaufgaben ausführen können. Ich kann Analyseaufrufe durchführen, Seiten im Offline-Cache speichern und Benachrichtigungen anzeigen.

Dies ist der gesamte Ablauf für Push-Nachrichten.

Weitere Informationen

• Web-Push-Benachrichtigungen – Übersicht
• So funktioniert Push
• Nutzer abonnieren
• UX der Berechtigung
• Nachrichten mit Web-Push-Bibliotheken senden
• Web-Push-Protokoll
• Umgang mit Push-Ereignissen
• Benachrichtigungen anzeigen
• Benachrichtigungsverhalten
• Allgemeine Benachrichtigungsmuster
• FAQs zu Push-Benachrichtigungen
• Häufige Probleme und Fehler melden

Code labs

• Client für Push-Benachrichtigungen erstellen
• Push-Benachrichtigungsserver erstellen