Progressive Web Apps : travailler avec les workers

1. Bienvenue

Dans cet atelier, vous allez prendre une application Web existante et ajouter un Web Worker pour partager l'état entre deux fenêtres ouvertes. Il s'agit du huitième d'une série d'ateliers de programmation complémentaires pour l'atelier sur les progressive web apps. L'atelier de programmation précédent était Inclusions de Service Worker. Il s'agit du dernier atelier de programmation de la série.

Points abordés

  • Ajouter un nœud de calcul partagé entre plusieurs fenêtres ouvertes
  • Utiliser Comlink pour faciliter l'utilisation des nœuds de calcul

À savoir

  • JavaScript

Ce dont vous avez besoin

2. Préparer l'atelier

Commencez par cloner ou télécharger le code de démarrage nécessaire pour effectuer cet atelier de programmation :

Si vous clonez le dépôt, assurez-vous d'être dans la branche pwa06--working-with-workers. Le fichier ZIP contient également le code de cette branche.

Ce code de base nécessite Node.js 14 ou version ultérieure. Une fois le code disponible, exécutez npm ci à partir de la ligne de commande dans le dossier du code afin d'installer toutes les dépendances dont vous aurez besoin. Ensuite, exécutez npm start pour démarrer le serveur de développement de l'atelier de programmation.

Le fichier README.md du code source fournit une explication pour tous les fichiers distribués. De plus, voici les principaux fichiers existants que vous utiliserez tout au long de cet atelier de programmation :

Fichiers clés

  • js/preview.js : fichier JavaScript de la page d'aperçu
  • js/main.js : fichier JavaScript de l'application principale

3. Écrire un Worker

Actuellement, la fonctionnalité d'aperçu de votre application Web n'affiche que le contenu le plus récent au chargement. Dans l'idéal, un aperçu en direct s'affiche pendant que l'utilisateur saisit du texte. Cela nécessite de compiler des quantités potentiellement importantes de données et de les transférer entre deux fenêtres ouvertes différentes. C'est pourquoi nous ne voulons pas effectuer cette opération sur le thread principal d'une des fenêtres ouvertes. Utilisons plutôt un Web Worker partagé.

Pour commencer, créez un fichier js/worker.js avec le code suivant :

import { expose } from 'comlink';
import { marked } from 'marked';

class Compiler {
  state = {
    raw: '',
    compiled: '',
  };
  subscribers = [];

  async set(content) {
    this.state = {
      raw: content,
      compiled: marked(content),
    };

    await Promise.all(this.subscribers.map((s) => s(this.state)));
  }

  subscribe(cb) {
    this.subscribers.push(cb);
  }
}

const compiler = new Compiler();

onconnect = (e) => expose(compiler, e.ports[0]);

Explication

Ce code configure une classe, appelée Compiler, qui permet de définir du contenu et d'appeler des abonnements une fois ce contenu compilé. Comme il s'agit d'un worker partagé, une seule instance de cette classe doit être utilisée. Une nouvelle instance de Compiler est donc instanciée. Ensuite, pour que l'utilisation de cette classe soit fluide en dehors du worker, Comlink est utilisé pour exposer l'instance du compilateur, ce qui nous permet d'utiliser toutes ses méthodes comme si elle était déclarée dans le code qui l'utilise. Comme il s'agit d'un worker partagé et non dédié, il doit être exposé à toutes les connexions.

4. Envoyer du contenu au contributeur

Maintenant que le nœud de calcul est créé, nous devons y envoyer du contenu. Pour ce faire, mettez à jour js/main.js comme suit :

  • Importer l'exportation nommée wrap depuis comlink
  • Créez un Shared Worker typé module appelé worker, définissez son type sur module et pointez vers lui à l'aide du modèle new URL (new URL('./worker.js', import.meta.url)).
  • Créez une variable compiler qui wrap le worker.port.
  • Dans la fonction de mise à jour de l'éditeur (editor.onUpdate), après avoir enregistré le contenu dans la base de données, attendez que compiler.set se termine en transmettant le contenu.

Explication

L'encapsulation d'une exportation Comlink permet d'utiliser des éléments tels que les méthodes de classe exposées comme s'ils n'étaient pas partagés au-delà d'une limite de worker, à l'exception du fait que tout est désormais asynchrone. Comme il s'agit d'un worker partagé et non dédié, Comlink doit encapsuler le port du worker au lieu du worker lui-même. Désormais, chaque fois que l'éditeur est mis à jour, le contenu est envoyé au worker pour être traité.

5. Mettre à jour la page d'aperçu

La dernière étape consiste à extraire le contenu compilé du nœud de calcul partagé pour l'afficher dans l'aperçu. La configuration est en grande partie la même, mais comme les fonctions ne peuvent pas passer entre les limites des workers, un proxy pour la fonction doit être utilisé à la place. Comlink est là pour vous aider. Mettez à jour js/preview.js pour effectuer les opérations suivantes :

  • Importer les exportations nommées wrap et proxy à partir de comlink
  • Créez et encapsulez le worker partagé comme vous l'avez fait dans js/main.js.
  • Appelez la méthode subscribe du compilateur avec une fonction proxy qui définit la propriété compiled des données entrantes sur le code HTML interne de la zone d'aperçu.

Une fois cela fait, ouvrez l'aperçu, commencez à taper du texte dans l'éditeur et amusez-vous à regarder votre code Markdown se compiler comme par magie et s'afficher en temps réel dans la zone d'aperçu, le tout sans bloquer le thread principal de l'une ou l'autre des pages !

6. Félicitations !

Vous avez appris à utiliser un worker partagé pour partager l'état entre plusieurs instances de PWA.