Cache PWA

Tempo de leitura: 4 minutos

Cache PWA: O armazenamento em cache é o que transforma um website comum em um Progressive Web App (PWA) confiável. Em vez de depender exclusivamente da rede, o PWA salva cópias de seus recursos (assets) diretamente no dispositivo do usuário.

Essa capacidade é fundamental para alcançar o princípio de Confiabilidade (Reliable), garantindo que o aplicativo carregue e funcione instantaneamente, mesmo com a conexão ausente ou instável (o chamado offline-first).

1. 📦 Fundamentos da Cache API

A API utilizada pelo Service Worker para gerenciar recursos chama-se Cache API. Ela é um armazenamento chave-valor onde a chave é o objeto Request (ou URL) e o valor é o objeto Response.

A. Quando o Cache Ocorre

Existem dois momentos principais para armazenar recursos em cache:

Pré-caching (Evento install): Armazenar ativos estáticos críticos imediatamente após a instalação do Service Worker. Essencial para o “App Shell” (offline shell).
Runtime Caching (Evento fetch): Armazenar ativos sob demanda, conforme o usuário os solicita pela primeira vez. Ideal para imagens dinâmicas ou páginas que não são críticas no início.

B. Download e Armazenamento

O Service Worker gerencia a Cache API através de métodos expostos no objeto global caches:

Método	Propósito
`caches.open(cacheName)`	Abre (ou cria) um cache com um nome específico (ex: `'v1-assets'`).
`cache.addAll(urls)`	Faz o download de uma lista de URLs e armazena as respostas no cache aberto.
`cache.match(request)`	Procura uma `Request` específica dentro do cache.
`cache.delete(request)`	Remove um recurso específico do cache.

2. 👷 Implementando o Pré-caching no Service Worker

O pré-caching é a técnica que garante que os recursos básicos (o “esqueleto” do aplicativo) estejam disponíveis desde o primeiro uso offline.

JavaScript

// service-worker.js

const CACHE_STATIC_NAME = 'static-v1'; 
const OFFLINE_URLS = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js'
];

self.addEventListener('install', (event) => {
  // event.waitUntil garante que o SW não ative até que o cache esteja preenchido
  event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
      .then((cache) => {
        console.log('Cache preenchido com App Shell.');
        // Faz o download e armazena todos os recursos da lista
        return cache.addAll(OFFLINE_URLS); 
      })
  );
});

3. 🔄 Atualizando e Removendo o Cache

O cache não deve ser estático. A maneira mais segura de garantir que os usuários obtenham a versão mais recente dos recursos é por meio do Controle de Versão do Cache.

A. Atualização do Cache (Evento `activate`)

A melhor prática para atualização é criar um novo cache com um novo nome (v2, v3, etc.) no evento install, e usar o evento activate para deletar os caches antigos.

JavaScript

// service-worker.js

const CACHE_STATIC_NAME = 'static-v2'; // NOME FOI ALTERADO para forçar atualização

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          // Se o nome do cache NÃO for o nome atual (v2), ele é antigo e deve ser deletado
          if (cacheName !== CACHE_STATIC_NAME) {
            console.log('Deletando cache antigo:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

B. Remoção de Recursos Específicos

Se você precisar remover um único recurso (ex: após a refatoração), use o método cache.delete(request) no momento apropriado (geralmente durante o activate ou o fetch para limpeza).

4. 🛠️ Depuração e Inspeção do Cache

A depuração é feita diretamente nas ferramentas do navegador:

Chrome/Edge DevTools: Vá para a aba Application (Aplicativo). Na seção Storage (Armazenamento), você encontrará Cache Storage e Service Workers.
- Você pode inspecionar o conteúdo de cada cache e simular o funcionamento offline.
Lighthouse: A ferramenta de auditoria automática do Google verifica se o PWA está registrando e ativando um Service Worker e se ele está gerenciando os eventos start_url para o modo offline.

✅ Conclusão

O cache é o motor que impulsiona a confiabilidade e a velocidade de um PWA. Ao utilizar o Service Worker para gerenciar a Cache API, você pode definir exatamente quais recursos são pré-armazenados (install para o App Shell) e como o controle de versão (activate para limpeza) garante que o usuário sempre tenha acesso à versão mais recente e a uma experiência offline robusta. Dominar as estratégias de cache é o passo final para entregar a experiência de aplicativo nativo que os PWAs prometem.

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: