Service Worker PWA

Tempo de leitura: 4 minutos

Service Worker PWA: O Service Worker (SW) é o pilar tecnológico mais crucial de um Progressive Web App (PWA). Trata-se de um script JavaScript que roda em segundo plano, separado da página principal e atua como um proxy (intermediário) entre o navegador e a rede.

Ele é o responsável por interceptar requisições, gerenciar o cache e habilitar funcionalidades de aplicativos nativos, como o funcionamento offline e as Notificações Push.

1. 📝 O Registro (Frontend – `index.html`)

O Service Worker deve ser explicitamente registrado pelo seu código JavaScript na página principal.

Verificação de Compatibilidade: O registro só pode ocorrer se o navegador do usuário suportar a API.
Escopo: O Service Worker só pode controlar as páginas que estão sob seu caminho de arquivo. Se o service-worker.js estiver na raiz (/), ele controla todo o site (/*).

Código de Registro (JavaScript no seu HTML)

JavaScript

if ('serviceWorker' in navigator) {
  // Garante que o registro só ocorra após o carregamento da página
  window.addEventListener('load', () => { 
    navigator.serviceWorker.register('/service-worker.js', { scope: '/' })
      .then(registration => {
        console.log('SW registrado. Escopo:', registration.scope);
      })
      .catch(error => {
        console.error('Falha no registro do SW:', error);
      });
  });
}

2. 🔁 O Ciclo de Vida do Service Worker

O SW passa por estados distintos que determinam quando ele pode ser usado. O desenvolvedor deve anexar lógica a esses eventos.

Evento/Estado	Ação	Propósito
`install`	Ocorre a primeira vez que o SW é baixado e detectado.	Pré-caching: Ideal para armazenar ativos estáticos essenciais (offline shell).
`activate`	Ocorre quando a nova versão do SW assume o controle da página.	Limpeza: Usado para apagar caches antigos de versões anteriores.
`fetch`	Ocorre para cada requisição de rede feita pela página controlada.	Estratégias de Cache: Onde você decide buscar o recurso (Cache ou Rede).

A. O Evento `install` (SW Script)

Durante a instalação, usamos event.waitUntil() para garantir que o SW não seja instalado até que a Promise de abertura e preenchimento do cache seja resolvida com sucesso.

JavaScript

const CACHE_NAME = 'cache-v1'; // Versão do Cache
const URLS_TO_CACHE = ['/', '/index.html', '/style.css', '/app.js'];

self.addEventListener('install', event => {
  console.log('SW: Evento Install');
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('SW: Pré-caching de assets...');
        return cache.addAll(URLS_TO_CACHE);
      })
  );
});

B. O Evento `activate` (SW Script)

É onde a limpeza de caches antigos ocorre, geralmente comparando o CACHE_NAME atual com os nomes existentes.

JavaScript

self.addEventListener('activate', event => {
  console.log('SW: Evento Activate');
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            console.log('SW: Deletando cache antigo:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

3. 📡 O Evento `fetch` e Estratégias de Cache (SW Script)

O evento fetch é a parte mais dinâmica. Ele é acionado para cada requisição HTTP/HTTPS. A lógica aqui implementa a estratégia de cache (ex: Cache First, Network Fallback).

JavaScript

self.addEventListener('fetch', event => {
  // event.respondWith permite que o SW intercepte e responda
  event.respondWith(
    caches.match(event.request) // 1. Tenta encontrar a requisição no cache
      .then(response => {
        // 2. Se a resposta existir no cache, retorna ela imediatamente (Cache First)
        if (response) {
          return response;
        }
        
        // 3. Se não estiver no cache, busca na rede (Network Fallback)
        return fetch(event.request);
      })
  );
});

✅ Conclusão

Service Worker PWA: O Service Worker é a tecnologia transformadora que permite aos PWAs oferecerem experiências de nível nativo. Seu comportamento é definido pelo seu ciclo de vida e pelos eventos que ele gerencia. Ao registrar o SW no frontend e implementar a lógica correta nos eventos install (para pré-cache), activate (para limpeza) e fetch (para estratégias de cache), você constrói a fundação para um aplicativo web rápido, confiável e totalmente funcional, mesmo offline.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: