Service Worker

Service Worker é um script JavaScript que roda em segundo plano no navegador, separadamente da página web, agindo como proxy entre o site e a rede. Permite cache avançado, funcionalidade offline, sincronização em background e push notifications. É a tecnologia que torna PWAs (Progressive Web Apps) possíveis. Em WordPress, Service Worker é configurado tipicamente via plugins de PWA, mas pode ser implementado manualmente para casos avançados.

O que é Service Worker?

Service Worker é uma tecnologia web introduzida em 2014 e amplamente adotada por todos os navegadores modernos desde 2017. Roda em thread separada do JavaScript da página principal, sem acesso ao DOM. Sua função primária é interceptar requisições de rede e decidir o que fazer com elas: servir do cache, da rede, ou combinar ambos.

Diferente de scripts JavaScript tradicionais (que rodam quando a página está aberta e morrem quando ela fecha), Service Worker persiste no navegador. Roda em background mesmo quando o usuário não está no site. Pode receber push notifications, sincronizar dados, cachear recursos para uso futuro.

É a peça técnica que permite sites funcionarem offline, carregarem instantaneamente em retornos, enviarem notificações como apps nativos. Sem Service Worker, essas capacidades não existem na web.

Service Worker exige HTTPS por questão de segurança — em HTTP, navegadores bloqueiam o registro. Localhost é exceção (para desenvolvimento). Para WordPress em produção, isso significa SSL configurado. Geralmente já está, via Let’s Encrypt.

Para que serve o Service Worker?

Quatro usos principais cobrem a maioria das aplicações.

Cache de recursos para offline

Service Worker armazena cópias de HTML, CSS, JS, imagens em cache local do navegador (Cache API). Quando o usuário visita o site sem conexão, Service Worker serve essas cópias. Site funciona offline para conteúdo já visto.

Push notifications

Sites podem enviar notificações ao usuário mesmo quando o navegador está fechado (em desktop) ou em segundo plano (em mobile). Service Worker recebe a notificação do servidor de push e exibe ao usuário. Comum em chat apps, e-commerces, portais de notícia.

Sincronização em background

Background Sync API permite o site agendar tarefas para serem executadas quando houver conexão. Usuário envia formulário sem internet — Service Worker agenda. Quando o navegador detecta conexão de volta, executa o submit. Útil para experiência de “funciona como app”.

Interceptar requests

Service Worker pode interceptar todas as requisições de rede da página e modificar resposta. Pode adicionar headers, redirecionar URLs, combinar dados de cache + rede, criar fallbacks customizados quando offline. É a base de estratégias avançadas de cache.

Como o Service Worker funciona

O ciclo de vida do Service Worker tem três fases. Registro: o JavaScript da página executa navigator.serviceWorker.register(‘/sw.js’). O navegador baixa o arquivo sw.js e o instala como Service Worker daquele site.

Instalação: na primeira vez (ou em atualização), o Service Worker dispara evento install. Aqui é o momento de cachear recursos críticos para uso offline. Após install bem-sucedido, fica em estado “waiting”.

Ativação: na próxima abertura do site (ou em recarga), o Service Worker dispara evento activate. Pode limpar caches antigos de versões anteriores. Após ativado, passa a interceptar requisições.

Operação: para cada requisição feita pela página (HTML, CSS, imagem, API), Service Worker dispara evento fetch. Decide via código o que fazer: servir do cache, ir à rede, combinar. Estratégias comuns: cache-first (cache primeiro, rede como fallback), network-first (rede primeiro, cache como fallback), stale-while-revalidate (serve cache, atualiza em background).

Service Worker e PWA

Service Worker é a tecnologia central de PWAs. Sem Service Worker, não há cache offline. Sem cache offline, não há PWA. As outras peças (manifest.json, ícone, HTTPS) são complementares; Service Worker é o motor.

Em PWA, Service Worker permite a sensação de app nativo. Página carrega instantaneamente em retornos (cache local serve em milissegundos). Funciona offline (cache mantém disponibilidade sem conexão). Recebe push notifications (Service Worker as exibe).

Para WordPress virar PWA, plugins como Super Progressive Web Apps registram Service Worker padrão automaticamente. Não exige código manual. Configurações básicas (URLs cacheadas, estratégia de cache, exclusões para wp-admin) já vêm definidas.

Para casos avançados, plugins de PWA permitem customizar Service Worker via filtros e configurações. Customizar é necessário para sites com áreas dinâmicas (carrinho de compras, área logada) que não podem ser servidas do cache estaticamente.

Service Worker no WordPress

Em WordPress, Service Worker é tipicamente implementado via plugin. Super Progressive Web Apps é o gratuito mais usado — instala, ativa, configura algumas opções no painel admin e o site passa a ter Service Worker funcionando.

Plugins de cache também usam Service Worker em algumas modalidades. WP Rocket, LiteSpeed Cache e similares podem registrar Service Worker para cache local de assets. Acelera carregamento em retornos sem precisar virar PWA explícita.

Para implementação manual, é possível criar arquivo sw.js custom e registrar via tema ou plugin próprio. Bibliotecas como Workbox (Google) facilitam — abstraem complexidade do Service Worker em APIs simples para estratégias de cache. Funciona em qualquer WordPress, mas exige conhecimento de JavaScript.

Cuidado com áreas dinâmicas. Cachear wp-admin, carrinho do WooCommerce ou áreas logadas pode causar comportamento estranho. Sempre exclua URLs sensíveis do escopo do Service Worker. Plugins de PWA fazem isso por padrão; implementação manual exige atenção.

Limitações e cuidados

Quatro limitações importam para qualquer implementação séria.

HTTPS obrigatório

Service Worker só funciona em sites HTTPS. Em HTTP, navegadores bloqueiam registro. Para WordPress, isso geralmente já está resolvido via Let’s Encrypt automático na maioria das hospedagens.

Escopo do service worker

Service Worker tem escopo definido pelo path do arquivo. Arquivo em /sw.js controla tudo do site. Arquivo em /blog/sw.js só controla /blog/. Em WordPress, Service Worker geralmente é registrado na raiz para cobrir todo site.

Debug complexo

Service Worker roda em thread separada — debugar é mais difícil que JavaScript normal. Chrome DevTools tem aba Application > Service Workers para inspecionar, mas curva de aprendizado é maior. “Funciona offline” é especialmente difícil de testar bem.

Versionamento

Service Worker fica cacheado pelo navegador. Atualizar exige cuidado: nova versão precisa esperar todas as abas existentes fecharem antes de assumir, a menos que use skipWaiting(). Erro comum: cache desatualizado servido por meses porque Service Worker antigo persistiu.

Service Worker e SEO

Service Worker não é fator direto de SEO. Google não rankeia sites com Service Worker acima de sites sem. Mas indireta, várias propriedades afetam SEO positivamente.

Performance é fator de ranking direto. Service Worker bem configurado entrega cache instantâneo em retornos, melhorando LCP, FCP e performance WordPress de forma mensurável. Core Web Vitals melhoram, ranking sobe.

Engagement é fator indireto. Sites com Service Worker e push notifications geram mais retornos, mais sessões, mais tempo no site. Sinais comportamentais influenciam ranking em queries competitivas.

Cuidado especial: Service Worker mal configurado pode servir conteúdo desatualizado para Googlebot. Bots não devem ser impactados pelo cache do Service Worker (geralmente não são, pois Service Worker só roda em navegadores). Mas teste com URL Inspection do Search Console para confirmar que o que o Google vê é o conteúdo atual.

Perguntas frequentes

Service Worker funciona em todos os navegadores? Em todos os modernos: Chrome, Firefox, Safari, Edge, Opera. iOS Safari teve suporte completo a partir do iOS 11.3 (2018). Em 2026, suporte é universal. Internet Explorer nunca suportou — mas IE praticamente não existe mais.

Service Worker afeta performance? Positivamente, quando bem implementado. Negativamente se mal configurado (cache que serve conteúdo errado, eventos pesados que travam thread). Plugins de PWA modernos fazem implementação correta por padrão. Implementações manuais exigem cuidado.

Posso usar Service Worker sem PWA? Sim. Service Worker é tecnologia base; PWA é uma aplicação dela. Você pode usar Service Worker apenas para cache e performance, sem manifest.json e sem pretender que o site seja instalável. WP Rocket e LiteSpeed Cache fazem exatamente isso em algumas modalidades.

Implementação técnica de PWA no WordPress: conheça os planos PRO da FULL Services. Entregamos WordPress com Service Worker configurado, cache otimizado e lazy loading profissional para performance moderna.