Update PWA

Tempo de leitura: 4 minutos

Update PWA: A natureza instalável de um PWA (Progressive Web App) exige uma estratégia clara para lidar com as atualizações, garantindo que os usuários sempre recebam as funcionalidades e correções mais recentes sem a necessidade de visitar uma loja de aplicativos.

As atualizações em um PWA se dividem em dois grupos principais: Atualização de Recursos Estáticos (Código) e Atualização de Dados Dinâmicos.

1. 💾 Atualização de Recursos Estáticos (Código e Service Worker)

A atualização do código-fonte (HTML, CSS, JavaScript) é controlada principalmente pelo Service Worker (SW) e requer técnicas de versionamento para forçar o navegador a baixar os novos arquivos.

A. Atualização do Service Worker

O navegador verifica se há uma nova versão do service-worker.js (a cada 24 horas ou na navegação). A atualização ocorre quando:

O conteúdo do arquivo (service-worker.js) é diferente do arquivo que está ativo.
Versão no URL (Não recomendado, mas eficaz): Mudar o URL do registro força o navegador a baixar um novo arquivo.

JavaScript

// A forma mais simples (mas não a ideal) de forçar o navegador a buscar um novo arquivo
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    // Mudar o parâmetro de query (?v=3) garante que um novo arquivo seja baixado
    navigator.serviceWorker.register('/service-worker.js?v=3'); 
  });
}

B. Versionamento de Recursos (Hashing)

Para garantir que novos assets (CSS/JS) sejam carregados e armazenados no novo cache, você deve usar hashing no nome do arquivo.

Arquivo Antigo: app.css
Novo Arquivo: app.b3d5f8.css

Isso é feito automaticamente por ferramentas de build (como Webpack ou Workbox). O Service Worker na nova versão irá pré-cachar o arquivo app.b3d5f8.css e deletar o cache do arquivo antigo durante o evento activate.

JavaScript

// Exemplo com Workbox, que automatiza o hashing e a lógica do Service Worker:
// O Workbox usa a 'revision' (o hash) para determinar se um arquivo precisa ser atualizado.
workbox.precaching.precacheAndRoute([
  { url: '/script.js', revision: 'hash-v1-2025' }, 
  { url: '/style.css', revision: 'hash-v1-2025' } 
]);

2. 🔃 Atualização de Dados Dinâmicos (API e Banco de Dados)

A atualização de dados (informações de usuários, feeds, listagens) exige estratégias de sincronização para garantir que o usuário veja o conteúdo mais recente.

A. Polling (Busca Periódica)

A aplicação cliente faz requisições (fetch) em intervalos regulares para verificar se há novos dados na API.

Vantagem: Simples de implementar.
Desvantagem: Pode ser ineficiente e gerar tráfego desnecessário se as atualizações forem raras.

B. WebSockets (Tempo Real)

Cria uma conexão persistente e bidirecional com o servidor, permitindo que o servidor envie dados (push) para o cliente assim que eles estiverem disponíveis.

Vantagem: Baixa latência, ideal para chat, placares e dados em tempo real.
Desvantagem: Requer uma infraestrutura de servidor mais complexa.

C. Estratégias de Cache no `fetch`

O Service Worker pode ser configurado para usar a estratégia Network First, Cache Fallback para dados dinâmicos, garantindo que a versão mais recente da rede seja sempre buscada, mas com o cache como plano de fundo offline.

3. 🚨 Alertando o Usuário sobre a Nova Versão

O Service Worker atualizado pode estar ativo em segundo plano, mas os usuários podem estar usando uma versão antiga. É importante notificar e incentivá-los a recarregar a página.

O Evento `updatefound`

No lado do cliente (página principal), você pode escutar o processo de registro para saber quando uma nova versão do SW foi baixada e está pronta para a ativação.

JavaScript

// Frontend JavaScript
navigator.serviceWorker.register('/service-worker.js')
  .then((registration) => {
    registration.onupdatefound = () => {
      const installingWorker = registration.installing;

      installingWorker.onstatechange = () => {
        // Quando o estado muda para 'installed' (mas ainda não ativo)
        if (installingWorker.state === 'installed') { 
          if (navigator.serviceWorker.controller) {
            // Existe um SW antigo: uma nova versão está pronta!
            showUpdateModal('Uma nova versão está disponível! Recarregue a página.');
          }
        }
      };
    };
  });

Notificação ao Usuário

Ao detectar a nova versão, use elementos não-intrusivos (como um Snackbar ou um pequeno Modal) pedindo ao usuário que clique em um botão “Atualizar Agora” para forçar o Service Worker a se ativar e a página a recarregar.

4. 🗂️ Atualização de Metadados (Manifest)

Atualizar o manifest.json (nome, ícones, tema) geralmente é simples:

Edite o arquivo manifest.json.
O navegador verifica se há mudanças no Manifest a cada navegação.
Quando mudanças são detectadas, o novo Manifest é baixado e as informações de instalação são atualizadas no sistema operacional (ícone, nome, etc.).

Nota: Não existe um campo "version" padrão no Manifest. O versionamento de código e cache é sempre feito através do Service Worker e dos hashes de arquivo.

✅ Conclusão Update PWA

Update PWA: A estratégia de atualização de PWAs deve ser dupla: versionar os recursos estáticos (usando hashing nos nomes de arquivo) para que o Service Worker possa baixá-los para um novo cache, e implementar uma lógica eficiente (Polling, WebSockets ou estratégias de fetch específicas) para sincronizar dados dinâmicos.

Além disso, a notificação proativa do usuário, acionada pelo evento updatefound no Service Worker, é essencial para garantir que a nova versão seja ativada e utilizada, oferecendo uma experiência sempre atualizada e fluida.

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: