Quelques notes sur SharedWorkers

J'ai récemment eu besoin d'implémenter un travailleur partagé dans un projet. Bien qu’ils soient très utiles, il n’y avait pas beaucoup d’informations à trouver aux endroits habituels, voici donc quelques conseils qui pourraient aider les chercheurs du futur mystérieux.

Arrière-plan

SharedWorkers est une classe spéciale de WebWorker qui peut être partagée sur plusieurs onglets, fenêtres ou autres Web Workers (réguliers).

Dans mon application, j'avais besoin d'un processus qui interrogerait les nouveaux événements de l'application (par exemple, un client finalisant un achat) et afficherait une notification (à l'aide de l'API Notifications) aux administrateurs connectés (ou plus précisément, à ceux connectés). chez les administrateurs qui avaient choisi de recevoir des notifications).

Un administrateur pourrait ouvrir l'application dans plusieurs onglets ou fenêtres, il serait donc inutile que chaque onglet interroge les nouveaux événements. Je ne voulais qu'une seule notification par événement, quel que soit le nombre d'onglets ou de fenêtres ouverts.

SharedWorker à la rescousse ! Chacun des onglets ou fenêtres ouverts partage un seul travailleur, qui interroge en arrière-plan et affiche une seule notification par nouvel événement.

Créer un travailleur partagé avec Vite

Le premier défi consistait à charger le travailleur partagé dans ma configuration basée sur Vite.

Si vous exécutez Vite en mode développement, Vite sert le script à partir d'un domaine et d'un port différents (par exemple http://[::1]:5173/), ce qui ne fonctionnera pas, car les travailleurs partagés doivent obéir. la politique de même origine.

J'ai essayé diverses solutions de contournement Vite pour les travailleurs Web :

• La méthode officielle des travailleurs Web Vite ne fonctionne pas pour les travailleurs partagés en raison de l'exigence de la politique de même origine.
• Les URL Blob ne sont pas prises en charge pour les nœuds de calcul partagés.
• Incorporer le travailleur en tant que chaîne base64 ne fonctionne pas car le navigateur les traite comme des travailleurs différents : très bien pour les travailleurs Web, mais pas pour les travailleurs partagés.

En fin de compte, j'ai créé une nouvelle route pour servir le script soit à partir du répertoire resources dans dev, soit du répertoire build dans les environnements de test et en direct.

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']);
    }
});

Je crée ensuite le travailleur partagé avec cet itinéraire comme URL :

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

Débogage du travailleur partagé

Vous constaterez rapidement que les erreurs de syntaxe ou d'exécution dans votre travailleur partagé n'apparaissent pas dans vos outils de développement. Ni aucun appel de journal/avertissement/information de console.

Celui-ci est simple, collez chrome://inspect/#workers dans votre barre d'URL, recherchez le travailleur partagé et cliquez sur « inspecter ». Vous disposez maintenant d’une fenêtre devtools réservée au travailleur partagé.

Communiquer vers l'onglet ou la fenêtre principale

Pour communiquer avec l'onglet « parent », utilisez la méthode port.postMessage, comme décrit dans la documentation MDN SharedWorker.

Cependant, l'exemple de code permet uniquement la communication avec l'onglet/la fenêtre « parent » le plus récent car il écrase la référence du port de communication à chaque fois qu'un parent se connecte.

Au lieu de cela, stockez un tableau de ports et ajoutez chaque nouveau port au tableau lorsqu'un nouveau « parent » se connecte.

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']);
    }
});

Ensuite, envoyez un message à toutes les pages parents comme ceci :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!