Avez-vous rencontré une situation où le chargement d'un site Web prend trop de temps, comme ce gif ci-dessous ?

 ? Avez-vous entendu parler des travailleurs des services ?

Dans cet article, nous allons découvrir ce que sont les service Workers ?, comment ils fonctionnent ⚙️ et comment je les ai utilisés pour améliorer les performances de mon application Web.

Qu'est-ce qu'un Service Worker ? ?

Un service worker est un script d'arrière-plan qui s'exécute séparément de la page Web et peut :

• Actifs du cache ?️
• Intercepter les requêtes réseau ?
• Fournir des fonctionnalités hors ligne ?

Caractéristiques clés des travailleurs des services :

1. S'exécute en arrière-plan : les techniciens de service ne sont pas liés au cycle de vie de la page, ce qui signifie qu'ils peuvent continuer à s'exécuter même si la page est fermée
2. Basé sur les événements : les techniciens de service écoutent des événements spécifiques, tels que les requêtes réseau (récupérer un événement)
3. Aucun accès au DOM : contrairement aux autres Web Workers, les Service Workers n'ont pas accès directement au DOM. Ils opèrent en arrière-plan, gérant les ressources et le trafic réseau

Voici un exemple simple de script Service Worker :

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
      console.error('Service Worker registration failed:', error);
    });
  });
}

 ? Dans cet extrait, le service worker (service-worker.js) est enregistré lors du chargement de la page. Si l’enregistrement réussit, il enregistre la portée du service worker ; sinon, il enregistre une erreur.

Mon défi : intégrer un jeu Unity WebGL dans une page Web

J'intégrais un jeu Unity WebGL dans un site Web .NET Razor. Le jeu se composait de gros fichiers « .wasm » et « .data » ainsi que de fichiers JavaScript qui étaient cruciaux pour le chargement du jeu. Cependant, le premier chargement de la page a pris plus de 20 secondes ! ? Cela était principalement dû à la taille des fichiers « .wasm » et « .data ».

La solution : mise en cache avec des techniciens de service

J'ai créé un fichier "ServiceWorker.js", qui met en cache tous les éléments de jeu nécessaires pour réduire le temps de chargement. Voici ce que contient le fichier :

const cacheName = "$Project_name";
const contentToCache = [
    "Build/Game.loader.js",
    "Build/Game.framework.js",
    "Build/Game.data",
    "Build/Game.wasm",
    "TemplateData/game_style.css"
];

self.addEventListener('install', function (e) {
    console.log('[Service Worker] Install');

    e.waitUntil((async function () {
        try {
            const cache = await caches.open(cacheName);
            console.log('[Service Worker] Caching all: app shell and content');
            for (const resource of contentToCache) {
                try {
                    await cache.add(resource);
                } catch (error) {
                    console.error(`[Service Worker] Failed to cache: ${resource}`, error);
                }
            }
        } catch (error) {
            console.error('[Service Worker] Failed to open cache', error);
        }
    })());
});

self.addEventListener('fetch', function (e) {
     e.respondWith((async function () {
        try {
            const response = await caches.match(e.request);
            console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
            if (response) return response;

            const fetchResponse = await fetch(e.request);
            const cache = await caches.open(cacheName);
            console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
            await cache.put(e.request, fetchResponse.clone());
            return fetchResponse;
        } catch (error) {
            console.error(`[Service Worker] Error fetching resource: ${e.request.url}`, error);
            throw error;
        }
    })());
});

À quoi sert ce code ?

Ce script de service worker effectue les actions suivantes :

• Mette en cache les fichiers essentiels nécessaires au fonctionnement du jeu, notamment les fichiers « .wasm », « .data » et JS pendant la phase d'installation.
• Intercepte les requêtes de récupération pour servir les ressources mises en cache si disponibles. Si la ressource n'est pas dans le cache, elle la récupère sur le réseau, la met en cache et renvoie la réponse.

Le résultat : une amélioration significative des performances

En mettant ces éléments en cache, le temps de chargement a été réduit de 20 secondes à moins de 3 secondes ?. La prochaine fois que les utilisateurs visiteront la page, les ressources seront déjà stockées localement, ce qui accélérera considérablement l'expérience.

⚠️ Soyez prudent ! Le problème de la mise en cache

Bien que cette approche fasse des merveilles pour améliorer les performances, elle a introduit un autre problème : les fichiers mis en cache obsolètes. Étant donné que nous développons activement le jeu Unity et publions de nouvelles versions, les fichiers mis en cache devaient être effacés à chaque fois qu'une nouvelle version était déployée.

Pour résoudre ce problème, j'ai créé un script de pipeline qui désinscrit automatiquement l'ancien service worker et efface le cache chaque fois que nous publions une nouvelle version de jeu. Cela garantit que les utilisateurs chargent toujours les dernières ressources sans être bloqués avec les anciennes versions mises en cache.

Conclusion

La mise en œuvre de service Workers dans votre application Web peut améliorer considérablement les performances, en particulier lorsqu'il s'agit de ressources volumineuses comme dans mon jeu Unity WebGL. Cependant, il est important de gérer la mise en cache avec soin pour éviter de diffuser des fichiers obsolètes.

Avez-vous vécu des expériences similaires en matière d'optimisation des temps de chargement ? Avez-vous utilisé des techniciens de service ou d'autres techniques ? Partagez vos réflexions et vos idées dans les commentaires ci-dessous ! ?

J'espère que vous avez appris quelque chose de nouveau aujourd'hui ! ✌️