Serving PWA

Serving PWA: O processo de Serving (Entrega de Conteúdo) em um PWA é totalmente redefinido pelo Service Worker (SW). Ao contrário de um website tradicional (que sempre busca recursos da rede), o SW atua como um proxy programável, permitindo que você controle a origem de cada ativo solicitado (seja do Cache ou da Rede).

O coração dessa lógica é o evento fetch.

1. ⚙️ O Evento fetch: Interceptando Requisições

Toda vez que a página controlada pelo Service Worker solicita um recurso (via <img>, <link>, fetch(), etc.), o SW dispara o evento fetch. Este evento fornece a oportunidade de interceptar a requisição e fornecer uma resposta personalizada.

A mágica acontece com event.respondWith(), que deve receber uma Promise que resolve para um objeto Response.

Estrutura Básica do fetch

JavaScript

// service-worker.js

self.addEventListener('fetch', (event) => {
  // event.respondWith espera uma Promise que produzirá uma Resposta
  event.respondWith(
    // A lógica de cache, rede, ou ambos, entra aqui:
    // Exemplo: Simplesmente tenta buscar na rede (sem cache)
    fetch(event.request) 
  );
});

2. 🛡️ Estratégia I: Cache First, Network Fallback (Confiabilidade)

Esta é a estratégia mais comum para o App Shell (ativos estáticos como HTML, CSS e JavaScript), pois prioriza a velocidade e a funcionalidade offline.

Fluxo:

1. Busca o recurso no Cache API (usando caches.match(event.request)).
2. Se encontrado (HIT), retorna imediatamente.
3. Se não encontrado (MISS), busca na Rede.

JavaScript

event.respondWith(
  caches.match(event.request)
    .then((response) => {
      // Se 'response' é definida (encontrada no cache), retorna
      return response || fetch(event.request); 
      
      // NOTA: Se buscar na rede, a nova resposta não é armazenada automaticamente. 
      // É necessário um código extra para adicionar o novo recurso ao cache.
    })
);

Vantagens: Carregamento instantâneo e funcionalidade offline.

Desvantagens: Pode servir versões desatualizadas se o Service Worker e o cache não forem versionados corretamente.

3. 🌐 Estratégia II: Network First, Cache Fallback (Atualização)

Ideal para dados dinâmicos (como requisições de API ou o HTML principal) que precisam estar o mais atualizados possível.

Fluxo:

1. Tenta buscar o recurso na Rede (fetch(event.request)).
2. Se o fetch for bem-sucedido, armazena a nova resposta no cache e a retorna.
3. Se o fetch falhar (usuário offline ou erro), busca a versão antiga no Cache.

Código com Cache e Atualização

JavaScript

event.respondWith(
  fetch(event.request)
    .then((response) => {
      // Verifica se a resposta é válida antes de armazenar
      if (!response || response.status !== 200 || response.type !== 'basic') {
        return response; // Retorna resposta da rede sem cachear
      }

      // Clona a resposta (pois a original só pode ser consumida uma vez)
      const responseToCache = response.clone();
      
      caches.open('runtime-cache') // Cache dedicado a dados de runtime
        .then((cache) => {
          cache.put(event.request, responseToCache);
        });

      return response; // Retorna a resposta original
    })
    .catch(() => {
      // Se a rede falhou, busca a versão mais recente no cache
      return caches.match(event.request);
    })
);

Vantagens: Garante que o usuário veja a versão mais recente quando online e fornece um fallback offline.

Desvantagens: Mais lento que o Cache First, pois sempre tenta a rede primeiro.

4. 🗄️ Outras Estratégias Simples

✅ Conclusão

Serving PWA: O evento fetch do Service Worker é o ponto de controle central para otimizar a entrega de conteúdo em um PWA. Ao dominar as diferentes estratégias de cache — como Cache First para ativos estáticos (rapidez e offline) e Network First para dados dinâmicos (atualização) — você garante uma experiência de usuário rápida e confiável, atendendo aos padrões de um aplicativo nativo.

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:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: