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 Blog-Beitrag 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-Dienst 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 ein datenschutzrelevanter Benutzer wie ich sind und einen Vermittlungsdienst sehen

Der Empfang aller Nachrichten löst Alarm aus. Um dieses Problem auszuräumen, hat 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


Möglicherweise ist Ihnen aufgefallen, dass sich der Setup-Pfeil von anderen Pfeilen im ASCII-Diagramm oben unterscheidet. Dies liegt daran, dass die Einrichtungsphase von der Implementierung abhängt. Alle gängigen Browser implementieren das 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 die 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 = "[email protected]";

// 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 versenden 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!