Você já passou por uma situação em que o carregamento do site demora muito, como neste gif abaixo?

? Você já ouviu falar de trabalhadores de serviços?

Nesta postagem, vamos nos aprofundar no que são service workers ?, como funcionam ⚙️ e como os usei para melhorar o desempenho do meu aplicativo da web.

O que é um prestador de serviço? ?

Um service worker é um script em segundo plano executado separadamente da página da web e pode:

• Ativos de cache ?️
• Interceptar solicitações de rede ?
• Oferecer funcionalidade off-line ?

Principais características dos trabalhadores de serviços:

1. Executado em segundo plano: Service workers não estão vinculados ao ciclo de vida da página, o que significa que podem continuar em execução mesmo que a página seja fechada
2. Orientado a eventos: os service workers ouvem eventos específicos, como solicitações de rede (evento de busca)
3. Sem acesso ao DOM: Ao contrário de outros web workers, os service workers não têm acesso direto ao DOM. Eles operam em segundo plano, gerenciando recursos e tráfego de rede

Aqui está um exemplo simples 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);
    });
  });
}

? Neste trecho, o service worker (service-worker.js) é registrado quando a página é carregada. Se o registro for bem-sucedido, ele registrará o escopo do service worker; caso contrário, ele registrará um erro.

Meu desafio: Integrar um jogo Unity WebGL em uma página web

Eu estava integrando um jogo Unity WebGL em um site .NET Razor. O jogo consistia em grandes arquivos ".wasm" e ".data" junto com arquivos JavaScript que eram cruciais para o carregamento do jogo. Porém, na primeira vez que a página carregou, demorou mais de 20 segundos! ? Isso ocorreu principalmente devido ao tamanho dos arquivos ".wasm" e ".data".

A solução: armazenamento em cache com service workers

Eu criei um arquivo "ServiceWorker.js", que armazena em cache todos os ativos do jogo necessários para reduzir o tempo de carregamento. Aqui está o que o arquivo contém:

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

O que esse código faz?

Este script de service worker executa as seguintes ações:

• Armazena em cache os arquivos essenciais necessários para a execução do jogo, incluindo ".wasm", ".data" e arquivos JS durante a fase de instalação.
• Intercepta solicitações de busca para servir recursos em cache, se disponíveis. Se o recurso não estiver no cache, ele o busca na rede, armazena-o em cache e retorna a resposta.

O resultado: aumento significativo de desempenho

Ao armazenar esses ativos em cache, o tempo de carregamento foi reduzido de 20 segundos para menos de 3 segundos?. Na próxima vez que os usuários visitarem a página, os ativos já estarão armazenados localmente, acelerando drasticamente a experiência.

⚠️ Seja cauteloso! O problema do cache

Embora essa abordagem faça maravilhas para melhorar o desempenho, ela introduziu outro problema: arquivos em cache desatualizados. Como estamos desenvolvendo ativamente o jogo Unity e lançando novas versões, os arquivos em cache precisavam ser limpos sempre que uma nova versão era implantada.

Para resolver isso, criei um script de pipeline que automaticamente cancela o registro do antigo service worker e limpa o cache sempre que publicamos uma nova versão do jogo. Isso garante que os usuários sempre carreguem os ativos mais recentes sem ficarem presos às versões antigas em cache.

Conclusão

A implementação de service workers em seu aplicativo Web pode melhorar drasticamente o desempenho, especialmente ao lidar com grandes ativos, como no meu jogo Unity WebGL. No entanto, é importante manusear o cache com cuidado para evitar servir arquivos desatualizados.

Você já teve experiências semelhantes otimizando tempos de carregamento? Você usou service workers ou outras técnicas? Compartilhe suas idéias e ideias nos comentários abaixo! ?

Espero que você tenha aprendido algo novo hoje! ✌️