Einige Hinweise zu SharedWorkers

Ich musste kürzlich einen Shared Worker in einem Projekt implementieren. Obwohl sie sehr nützlich sind, waren an den üblichen Stellen nicht viele Informationen zu finden. Hier sind einige Hinweise, die Suchenden aus der mysteriösen Zukunft helfen könnten.

Hintergrund

SharedWorker sind eine spezielle Klasse von WebWorkern, die über mehrere Registerkarten, Fenster oder andere (normale) Web-Worker hinweg gemeinsam genutzt werden können.

In meiner Anwendung benötigte ich einen Prozess, der neue Anwendungsereignisse abfragt (z. B. wenn ein Kunde einen Kauf abschließt) und angemeldeten Administratoren (oder genauer gesagt den angemeldeten Administratoren) eine Benachrichtigung anzeigt (mithilfe der Benachrichtigungs-API). bei Administratoren, die sich für den Erhalt von Benachrichtigungen entschieden haben).

Ein Administrator könnte die Anwendung in mehreren Registerkarten oder Fenstern öffnen, sodass es verschwenderisch wäre, wenn jede Registerkarte neue Ereignisse abfragen würde. Ich wollte nur eine Benachrichtigung pro Ereignis, unabhängig von der Anzahl der geöffneten Tabs oder Fenster.

SharedWorker zur Rettung! Jeder der geöffneten Tabs oder Fenster teilt sich einen einzelnen Worker, der im Hintergrund Umfragen durchführt und nur eine Benachrichtigung pro neuem Ereignis anzeigt.

Erstellen eines Shared Workers mit Vite

Die erste Herausforderung bestand darin, den Shared Worker in meinem Vite-basierten Setup zu laden.

Wenn Sie Vite im Entwicklungsmodus ausführen, stellt Vite das Skript von einer anderen Domäne und einem anderen Port bereit (z. B. http://[::1]:5173/), was nicht funktioniert, da gemeinsam genutzte Worker gehorchen müssen die Same-Origin-Politik.

Ich habe verschiedene Vite-Workarounds für Web-Worker ausprobiert:

• Die offizielle Vite-Web-Worker-Methode funktioniert aufgrund der Richtlinienanforderung der gleichen Herkunft nicht für gemeinsam genutzte Worker.
• Blob-URLs werden für freigegebene Worker nicht unterstützt.
• Das Einbinden des Workers als Base64-String funktioniert nicht, da der Browser sie als unterschiedliche Worker behandelt: gut für Web-Worker, aber nicht für gemeinsam genutzte Worker.

Am Ende habe ich eine neue Route erstellt, um das Skript entweder aus dem Ressourcenverzeichnis in Dev oder aus dem Build-Verzeichnis in Staging- und Live-Umgebungen bereitzustellen.

Route::addRoute('GET', '/notifications-shared-worker.js', function () {
    // If in dev environment, send the file from the resources folder
    if (app()->environment('local')) {
        return response()->file(resource_path('js/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    } else {
        // Otherwise, send the file from the public folder
        return response()->file(public_path('build/assets/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    }
});

Ich erstelle dann den freigegebenen Worker mit dieser Route als URL:

const worker = new SharedWorker('/notifications-shared-worker.js');

Debuggen des Shared Workers

Sie werden schnell feststellen, dass etwaige Syntax- oder Laufzeitfehler in Ihrem Shared Worker nicht in Ihren Devtools auftauchen. Es werden auch keine Konsolenprotokolle/Warnungen/Infoaufrufe ausgeführt.

Dies ist ganz einfach: Fügen Sie chrome://inspect/#workers in Ihre URL-Leiste ein, suchen Sie den freigegebenen Worker und klicken Sie auf „Inspizieren“. Jetzt haben Sie ein Devtools-Fenster nur für den Shared Worker.

Zurück zur Hauptregisterkarte oder zum Hauptfenster kommunizieren

Um zurück zur Registerkarte „Übergeordnet“ zu kommunizieren, verwenden Sie die Methode port.postMessage, wie in der MDN SharedWorker-Dokumentation beschrieben.

Der Beispielcode erlaubt jedoch nur die Kommunikation mit der aktuellsten „übergeordneten“ Registerkarte/dem aktuellsten „übergeordneten“ Fenster, da er die Kommunikationsportreferenz jedes Mal überschreibt, wenn ein übergeordnetes Element eine Verbindung herstellt.

Speichern Sie stattdessen ein Array von Ports und fügen Sie jeden neuen Port zum Array hinzu, wenn ein neuer „übergeordneter“ Port eine Verbindung herstellt.

Route::addRoute('GET', '/notifications-shared-worker.js', function () {
    // If in dev environment, send the file from the resources folder
    if (app()->environment('local')) {
        return response()->file(resource_path('js/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    } else {
        // Otherwise, send the file from the public folder
        return response()->file(public_path('build/assets/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    }
});

Senden Sie dann eine Nachricht wie folgt an alle übergeordneten Seiten:

const worker = new SharedWorker('/notifications-shared-worker.js');

Das obige ist der detaillierte Inhalt vonEinige Hinweise zu SharedWorkers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!