¿Tuviste una situación en la que la carga del sitio web tarda demasiado, como este gif a continuación?

? ¿Has oído hablar de trabajadores de servicios?

En esta publicación, profundizaremos en ¿qué son los trabajadores de servicios?, cómo funcionan ⚙️ y cómo los usé para mejorar el rendimiento de mi aplicación web.

¿Qué es un trabajador de servicios? ?

Un trabajador de servicio es un script en segundo plano que se ejecuta por separado de la página web y puede:

• Activos de caché?️
• ¿Interceptar solicitudes de red?
• ¿Ofrecer funcionalidad sin conexión?

Características clave de los trabajadores de servicios:

1. Se ejecuta en segundo plano: los trabajadores del servicio no están vinculados al ciclo de vida de la página, lo que significa que pueden continuar ejecutándose incluso si la página está cerrada
2. Basado en eventos: los trabajadores del servicio escuchan eventos específicos, como solicitudes de red (obtener evento)
3. Sin acceso al DOM: a diferencia de otros trabajadores web, los trabajadores de servicios no tienen acceso al DOM directamente. Operan en segundo plano, gestionando recursos y tráfico de red

Aquí hay un ejemplo sencillo de script de 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);
    });
  });
}

? En este fragmento, el trabajador del servicio (service-worker.js) se registra cuando se carga la página. Si el registro es exitoso, registra el alcance del trabajador del servicio; de lo contrario, registra un error.

Mi desafío: integrar un juego Unity WebGL en una página web

Estaba integrando un juego Unity WebGL en un sitio web .NET Razor. El juego constaba de grandes archivos ".wasm" y ".data" junto con archivos JavaScript que eran cruciales para la carga del juego. Sin embargo, la primera vez que se cargó la página, ¡tardó más de 20 segundos! ? Esto se debió principalmente al tamaño de los archivos ".wasm" y ".data".

La solución: almacenamiento en caché con trabajadores de servicios

Creé un archivo "ServiceWorker.js", que almacena en caché todos los recursos necesarios del juego para reducir el tiempo de carga. Esto es lo que contiene el archivo:

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;
        }
    })());
});

¿Qué hace este código?

Este script de trabajador de servicio realiza las siguientes acciones:

• Almacena en caché los archivos esenciales necesarios para que el juego se ejecute, incluidos los archivos ".wasm", ".data" y JS durante la fase de instalación.
• Intercepta solicitudes de recuperación para servir recursos almacenados en caché si están disponibles. Si el recurso no está en el caché, lo recupera de la red, lo almacena en caché y devuelve la respuesta.

El resultado: aumento significativo del rendimiento

Al almacenar en caché estos recursos, el tiempo de carga se redujo de 20 segundos a menos de 3 segundos. La próxima vez que los usuarios visiten la página, los recursos ya estarán almacenados localmente, lo que acelerará drásticamente la experiencia.

⚠️ ¡Ten cuidado! El problema del almacenamiento en caché

Si bien este enfoque funciona de maravilla para mejorar el rendimiento, introdujo otro problema: archivos almacenados en caché obsoletos. Dado que estamos desarrollando activamente el juego Unity y lanzando nuevas versiones, los archivos en caché debían borrarse cada vez que se implementaba una nueva versión.

Para resolver esto, creé un script de canalización que automáticamente cancela el registro del antiguo trabajador del servicio y borra el caché cada vez que publicamos una nueva versión del juego. Esto garantiza que los usuarios siempre carguen los recursos más recientes sin tener que quedarse con versiones antiguas almacenadas en caché.

Conclusión

La implementación de trabajadores de servicios en su aplicación web puede mejorar drásticamente el rendimiento, especialmente cuando se trata de grandes activos, como en mi juego Unity WebGL. Sin embargo, es importante manejar el almacenamiento en caché con cuidado para evitar entregar archivos obsoletos.

¿Has tenido experiencias similares optimizando tiempos de carga? ¿Utilizó trabajadores de servicios u otras técnicas? ¡Comparta sus pensamientos e ideas en los comentarios a continuación! ?

¡Espero que hayas aprendido algo nuevo hoy! ✌️