Transformar o seu site numa PWA instalável e com modo offline

Prompt

Atua como programador web especializado em Progressive Web Apps, service workers e estratégias de cache.

Contexto:
- Site ou aplicação: {{site}}
- Stack e alojamento: {{stack}}
- Nível de funcionamento offline: {{nivel_offline}}
- Prioridades: {{prioridades}}

Se o site tiver áreas privadas, dados pessoais ou conteúdo que muda com frequência, pergunta-me como são geridos antes de definires o que fica em cache.

Entregáveis:
1. O manifest da aplicação web: nome, nome curto, cores, display, start_url, scope e ícones (192 e 512 px, e uma versão maskable), com as etiquetas a acrescentar ao HTML.
2. O service worker com uma estratégia por tipo de recurso, explicada numa tabela: precache do esqueleto da aplicação, stale-while-revalidate para CSS, JS e imagens, network-first com tempo limite para o HTML e só rede para a API autenticada.
3. A página offline e como é servida quando a rede falha.
4. Versionamento das caches, limpeza das antigas no evento activate e um fluxo de atualização que avise o utilizador de que há uma versão nova em vez de recarregar de surpresa.
5. O código de registo do service worker e a alternativa com Workbox se encaixar melhor em {{stack}}.
6. As limitações conhecidas em iOS e Safari que devo verificar, indicando que convém confirmá-las na documentação atual.
7. Como testar: painel Application das DevTools, simulação offline, auditoria de instalabilidade e casos de teste concretos.

Restrições:
- O site tem de ser servido por HTTPS; lembra-mo se o alojamento não o garantir.
- Não guardes em cache respostas com dados pessoais ou de sessão.
- Não acrescentes notificações push nem sincronização em segundo plano, salvo se o pedir nas prioridades.
- Marca com [PREENCHER] as cores, nomes e ícones que não te tenha indicado.

Formato: tabela de estratégias, um bloco de código por ficheiro com o caminho e uma lista de testes.

Como utilizar

Exemplo de utilização

Exemplo de resultado

const VERSION = 'v1';
const SHELL = `shell-${VERSION}`;
const PAGINAS = `paginas-${VERSION}`;
const RECURSOS = `recursos-${VERSION}`;
const PRECACHE = ['/', '/offline/', '/manifest.webmanifest']; // [PREENCHER: CSS/JS com hash do Astro]

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(SHELL).then((cache) => cache.addAll(PRECACHE)));
});

self.addEventListener('activate', (event) => {
  const atuais = [SHELL, PAGINAS, RECURSOS];
  event.waitUntil(caches.keys().then((chaves) =>
    Promise.all(chaves.filter((c) => !atuais.includes(c)).map((c) => caches.delete(c)))));
});

const guardar = (nome, request, res) => {
  if (res.ok) { const copia = res.clone(); caches.open(nome).then((c) => c.put(request, copia)); }
  return res;
};

self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.method !== 'GET' || new URL(request.url).origin !== location.origin) return;
  if (request.mode === 'navigate') {
    event.respondWith(fetch(request).then((res) => guardar(PAGINAS, request, res))
      .catch(async () => (await caches.match(request)) ?? caches.match('/offline/')));
    return;
  }
  event.respondWith(caches.match(request).then((emCache) => {
    const rede = fetch(request).then((res) => guardar(RECURSOS, request, res)).catch(() => emCache);
    return emCache ?? rede;
  }));
});

Dados-chave

Categoria

Programação e desenvolvimento · Criar páginas web

Tipo de resultado

Código

Nível

Intermédio

Pensado para

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificado em

Pendente de verificação editorial

Variáveis

Site ou aplicação, Stack e alojamento, Funcionamento offline e Prioridades

Idioma

Português

Preço

Gratuito, sem registo

Atualizado

07/11/2026

Perguntas frequentes