Senden Sie Web-Push-Nachrichten mit Deno

In letzter Zeit habe ich an einem neuen Webpush-Paket gearbeitet, das von Grund auf nur mit Web-APIs erstellt wurde. Dadurch ist es (zumindest theoretisch) möglich, Web-Push-Nachrichten direkt von Ihrem Browser aus zu versenden.

Dieser Blogbeitrag soll erklären, was das Web Push-Protokoll ist und wie es funktioniert
(RFC 8291) und wie man Web-Push-Nachrichten mithilfe meiner Bibliothek sendet.

Was ist das Web Push-Protokoll?

Das Web-Push-Protokoll ist ein Zwischenprotokoll, das es einer Anwendung ermöglicht, Nachrichten an einen Benutzeragenten (normalerweise einen Browser) zu senden.

Es ähnelt Server-Sent Events (SSE) in dem Sinne, dass Nachrichten an den Benutzeragenten gesendet werden, aber es dient einem anderen Zweck. Für Web-Push-Nachrichten ist es nicht erforderlich, dass Websites als Servicemitarbeiter einen geöffneten Tab haben
kann auf Push-Nachrichten hören. Es funktioniert im Hintergrund.

Wie funktioniert das Web Push-Protokoll?

Das Web-Push-Protokoll umfasst drei Akteure:

• User-Agent: normalerweise der Browser Ihres Website-Besuchers
• Push-Dienst: Push-Server, der je nach Browser von Google, Mozilla oder Apple verwaltet und betrieben wird
• Anwendungsserver: Ihr Server

Hier ist eine Übersicht über die Interaktionen zwischen ihnen:

    +-------+           +--------------+       +-------------+
    |  UA   |           | Push Service |       | Application |
    +-------+           +--------------+       +-------------+
        |                      |                      |
        |        Setup         |                      |
        |<====================>|                      |
        |           Provide Subscription              |
        |-------------------------------------------->|
        |                      |                      |
        :                      :                      :
        |                      |     Push Message     |
        |    Push Message      |<---------------------|
        |<---------------------|                      |
        |                      |                      |

Ein Zwischen-Push-Service ist aus mehreren Gründen erforderlich.

Erstens reduziert es die Bandbreite und den Batterieverbrauch, da Benutzeragenten nur eine einzige Verbindung für alle Websites statt einer pro Website aufrechterhalten.

Es verbessert auch die Skalierbarkeit und Zuverlässigkeit, da die Push-Dienste der großen Browser für die Verarbeitung von Millionen von Benutzern ausgelegt sind. Da Push-Nachrichten beibehalten werden müssen, wenn der Benutzeragent offline ist, erfordert der Aufbau eines Push-Dienstes einen hohen technischen Aufwand sowie eine belastbare und redundante Infrastruktur

Schließlich ist der Aufbau, die Bereitstellung und die Wartung eines benutzerdefinierten Push-Dienstes für kleine Webunternehmen oft zu komplex und ressourcenintensiv. Dies würde größeren Unternehmen einen unfairen Wettbewerbsvorteil verschaffen, da sie über die notwendigen Ressourcen verfügen würden, um ihre eigenen Push-Dienste zu entwickeln und zu verfeinern.

Wenn Sie wie ich ein datenschutzrelevanter Benutzer sind und einen Vermittlungsdienst aufsuchen
Beim Empfang aller Nachrichten werden Warnsignale ausgelöst. Um dieses Problem auszuräumen, Web Push
Nachrichten werden durch HTTP-verschlüsselte Inhaltskodierung gesichert (siehe mein
http-ece-Paket), um sicherzustellen, dass
Sensible Informationen bleiben geschützt und für Dritte unlesbar
Dienstleistungen im Transit.

Aufstellen

Vielleicht ist Ihnen aufgefallen, dass sich der Setup-Pfeil von den anderen im ASCII-Diagramm oben unterscheidet. Dies liegt daran, dass die Einrichtungsphase von der Implementierung abhängt. Alle gängigen Browser implementieren Javascript
Push-API in einem
anders. Eine PushManager.subscribe()-Methode, die einen Standard
zurückgibt PushSubscription ist verfügbar.

Abonnements enthalten immer einen eindeutigen URL-Endpunkt, der dem Push-Abonnement zugeordnet ist, und einen öffentlichen Schlüssel, der zum Verschlüsseln von Nachrichten verwendet wird.

Beim Erstellen eines Abonnements kann ein optionaler applicationServerKey bereitgestellt werden, um Push-Nachrichten des Anwendungsservers zu identifizieren. Dies ist die Authentifizierungsmethode Voluntary Application Server Identification (VAPID)
(RFC 8292). VAPID-Schlüssel werden verwendet, um DDOS-Angriffe auf Push-Dienste abzuwehren. Durch das Hinzufügen einer Authentifizierung zwischen Anwendungsserver und Push-Dienst wird außerdem das Risiko verringert, dass der Abonnementendpunkt verloren geht. Aus diesen Gründen sind sie in Firefox obligatorisch.

Abonnement bereitstellen

Der zweite Schritt besteht darin, das Abonnement an den Anwendungsserver zu senden, damit dieser mit dem Senden von Nachrichten beginnen kann.

Der Anwendungsserver speichert das Abonnement normalerweise zur späteren Wiederverwendung in einer Datenbank.

Push-Nachricht

Um schließlich eine Nachricht zu übertragen, sendet der Anwendungsserver eine verschlüsselte HTTP-Anfrage mit einem Vapid-Authentifizierungsschema, wenn applicationServerKey zum Erstellen eines Abonnements bereitgestellt wurde.

Wenn der Benutzeragent online ist, wenn die Nachricht vom Push-Dienst empfangen wird, ist dies der Fall
weitergeleitet. Andernfalls wird es gespeichert, bis der Benutzeragent online geht oder die Nachricht abläuft.

Wenn der Benutzeragent eine Nachricht empfängt, führt er den Push-Event-Handler aus, der hauptsächlich zum Anzeigen einer Benachrichtigung verwendet wird, und das war’s.

Einrichten eines Anwendungsservers mit Webpush

Zuerst müssen Sie VAPID-Schlüssel generieren, da diese in einigen Browsern obligatorisch sind:

$ deno run https://raw.githubusercontent.com/negrel/webpush/master/cmd/generate-vapid-keys.ts

Kopieren Sie die Ausgabe und speichern Sie sie in einer Datei. Sie müssen VAPID-Schlüssel nicht erneut generieren.

In Ihrem Anwendungsservercode können Sie sie wie folgt laden:

import * as webpush from "jsr:@negrel/webpush";

// Read generated VAPID file.
const vapidKeysJson = Deno.readTextFileSync("./path/to/vapid.json");

// Import VAPID keys.
webpush.importVapidKeys(JSON.parse(vapidKeysJson));

Dann müssen Sie eine ApplicationServer-Objektinstanz erstellen.

// adminEmail is used by Push services maintainer to contact you in case there
// is problem with your application server.
const adminEmail = "john@example.com";

// Create an application server object.
const appServer = await webpush.ApplicationServer.new({
  contactInformation: "mailto:" + adminEmail,
  vapidKeys,
});

Um dann Push-Nachrichten zu senden, erstellen Sie einfach einen PushSubscriber und rufen Sie ihn auf
pushMessage()/pushTextMessage()-Methode wie folgt:

const subsribers = [];

// HTTP handler for user agent sending their subscription.
function subscribeHandler(req) {
  // Extract subscription send by user agent.
  const subscription = await req.json();

  // Store subscription in db.
  // ...

  // Create a subscriber object.
  const sub = appServer.subscribe(subscription);

  // Store subscriber in memory.
  subscribers.push(sub);
}

// Helper method to send message to all subscribers.
function broadcastMessage(msg) {
  for (const sub of subscribes) {
    sub.pushTextMessage(msg, {});
  }
}

Das ist es, Sie senden Push-Nachrichten an Ihre Abonnenten!

Das Webpush-Repository enthält ein interaktives Beispiel mit ähnlichem Code, den Sie lokal ausführen können. Es enthält auch clientseitigen Javascript-Code, schauen Sie sich ihn also unbedingt an!

Das obige ist der detaillierte Inhalt vonSenden Sie Web-Push-Nachrichten mit Deno. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!