Service Workers e PWA

Definição

Service Workers são scripts JavaScript que rodam em segundo plano, fora do contexto da página web. Eles atuam como proxies controlados pelo desenvolvedor, capazes de interceptar requisições de rede, armazenar dados em cache, exibir notificações push e permitir funcionalidades offline.

Essa tecnologia é o núcleo das Progressive Web Apps (PWAs) — aplicações web que oferecem uma experiência semelhante à de apps nativos, podendo ser instaladas no dispositivo do usuário e funcionando mesmo sem conexão com a internet.

Objetivos dos Service Workers e das PWAs

Permitir funcionamento offline: armazenando páginas e recursos no cache local.
Aumentar performance: reduzindo o tempo de carregamento com conteúdo servido do cache.
Oferecer comportamento de app: com tela inicial, ícone, modo standalone e notificações.
Controlar o tráfego de rede: adotando estratégias como cache-first, network-first ou fallback offline.
Desacoplar a lógica de rede da interface, operando mesmo com a aba do navegador fechada.

Exemplo prático — Registro de Service Worker e cache estático

Estrutura básica dos arquivos

/index.html
/sw.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Exemplo PWA</title>
  </head>
  <body>
    <h1>Programício PWA</h1>
    <script>
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker
          .register("/sw.js")
          .then(() => console.log("Service Worker registrado!"))
          .catch(console.error);
      }
    </script>
  </body>
</html>

sw.js (Service Worker)

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("programicio-cache-v1").then((cache) => {
      return cache.addAll(["/", "/index.html"]);
    })
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((resposta) => {
      return resposta || fetch(event.request);
    })
  );
});

Esse Service Worker intercepta as requisições de rede e tenta atendê-las com conteúdo armazenado no cache. Se não encontrar, faz a requisição normal pela rede.

O ciclo dos Service Workers e PWA

[Usuário acessa o site pela primeira vez]
        ↓
[Navegador registra e instala o Service Worker]
        ↓
[Service Worker intercepta requisições e armazena recursos em cache]
        ↓
[Em visitas futuras, a aplicação pode funcionar mesmo offline]
        ↓
[Usuário pode instalar a aplicação como um PWA no dispositivo]

Os Service Workers só funcionam em ambientes seguros — HTTPS ou localhost em desenvolvimento. Eles não têm acesso direto ao DOM, mas podem se comunicar com a página via postMessage.