Trecho do capítulo "Aplicativo instalável e mobile avançado"
alexandrecaramaschi.com/educacao/frontends-com-vibecoding

Um pedido pronto para colar no agente: transformar o projeto em aplicativo
instalável, com estratégia de cache declarada por tipo de recurso. A página
explica cada decisão; aqui está o material bruto.

================================================================================

### O que faz: transforma um projeto Next.js em aplicativo instalável, com cache definido recurso por recurso
### Onde entra: conversa com o agente, no projeto que já está no ar
### Cuidado: sem versão no que fica guardado, o cliente continua vendo a tela antiga depois de você publicar a correção

Transforme meu projeto Next.js (App Router, React 19, Tailwind v4) em uma
PWA instalável, usando Workbox. Entregue, com explicação curta de cada arquivo:

1. public/manifest.webmanifest com nome, short_name, display standalone,
   theme_color e background_color coerentes com meu tema, e ícones 192/512
   + um maskable 512. Liste os arquivos de ícone que devo gerar.
2. Um service worker com estratégias por tipo de recurso:
   - imagens: stale-while-revalidate, teto de 60 entradas / 30 dias;
   - rotas /api/: network-first com timeout de 3s, fallback no cache;
   - fontes e assets versionados: cache-first;
   - precache do app shell + página /offline.html como fallback de navegação.
3. O registro do service worker no cliente, só em produção e só se
   'serviceWorker' existir em navigator.
4. Um componente React <BotaoInstalar> que escuta beforeinstallprompt,
   guarda o evento e só aparece quando dá para instalar; no iOS (sem o
   evento), mostra a dica de "Adicionar à Tela de Início".
5. A meta viewport com viewport-fit=cover e exemplos de safe-area-inset
   na barra superior e na barra de ação inferior.

Critérios de aceite: o app instala no Android/desktop; abre offline
mostrando /offline.html; não serve cache velho após deploy (cache
versionado); passa na auditoria PWA do Lighthouse. Use min-height: 100dvh
nos containers de tela cheia. Aponte qualquer limitação no iOS.