Como usar: Gerador de Manifest PWA
- Informe o nome do app, um nome curto para a tela inicial (até 12 caracteres), uma descrição e a URL inicial.
- Escolha o modo de exibição (standalone para uma janela parecida com app) e as cores de tema e de fundo usadas na barra de título e na tela de splash.
- Defina onde ficam os seus ícones (192 e 512 px, além de um maskable) e mantenha o service worker offline ativado, com a estratégia de cache que combina com o seu site.
- Baixe o ZIP, coloque os arquivos na raiz do seu site, adicione as tags do
<head>e confira em Chrome DevTools → Application → Manifest.
O que torna um site instalável
- Servido via HTTPS.
- Um web app manifest com
nameoushort_name,start_url, um mododisplaydiferente debrowsere ícones de pelo menos 192 px e 512 px. - Um manifest vinculado no
<head>da página. O Chrome não exige mais um service worker para instalar, mas você precisa dele para funcionar offline.
Estratégias de cache do service worker
| Estratégia | Como responde | Ideal para |
|---|---|---|
| Network first | Tenta a rede e recorre ao cache quando estiver offline | Páginas (sempre usada para HTML aqui) |
| Stale-while-revalidate | Responde do cache na hora e atualiza o cache em segundo plano | CSS, JS e imagens que mudam de vez em quando |
| Cache first | Usa o cache e só vai à rede quando o arquivo não existe | Arquivos com hash ou versão no nome |
Incremente a versão do cache ao publicar, para que o novo service worker limpe os caches antigos na ativação. Quando nada está em cache e a rede está fora, os visitantes veem o offline.html.
Também pesquisado como: gerador de web app manifest, gerador manifest.json, gerador de service worker, gerador de pwa, tornar site instalável, service worker offline, gerador webmanifest.
Ferramentas que combinam com: Gerador de Manifest PWA
- Gerador de ícones de aplicativos — Basta arrastar uma imagem quadrada e você terá todos os tamanhos de ícone que seu app precisa — um AppIcon.appiconset pronto para o Xcode, pastas de mipmaps do Android com ícones adaptáveis, o ícone da Play Store e ícones para a web/PWA — tudo em um único arquivo ZIP.
- Gerador de favicons — Crie um pacote completo de favicons a partir de um logotipo, uma letra ou um emoji: um arquivo favicon.ico com vários tamanhos, o ícone de toque da Apple, ícones para Android/PWA, um webclip do Webflow, o manifesto da web e as tags HTML para colar.
- Gerador de Meta Tags — Preencha um único formulário e obtenha um <head> completo e válido — título, descrição, canonical, robots, Open Graph, cards do X/Twitter, cor do tema e ícones — com prévias ao vivo e saída específica para o Webflow.
- Gerador de Deep Links — Crie os dois arquivos que fazem os links do seu site abrirem o seu app: apple-app-site-association para Universal Links no iOS e assetlinks.json para App Links no Android.
Perguntas frequentes
É manifest.json ou manifest.webmanifest?
Os dois funcionam. A extensão recomendada pela especificação é .webmanifest (servido como application/manifest+json), mas .json também serve, desde que o aponte para ele.
O que é um ícone maskable?
É um ícone com margem extra (uma zona segura nos 80% centrais) que o Android pode recortar em círculo, squircle ou outro formato sem cortar o seu logo.
Por que meu PWA não mostra o botão de instalar?
Verifique em Chrome DevTools → Application → Manifest se há erros. Geralmente é um ícone de 192 ou 512 px ausente, um start_url ou scope incorreto, display definido como browser ou a página não estar sendo servida via HTTPS.
Como atualizo um PWA depois de publicar?
Altere a versão do cache no sw.js. O navegador instala o novo service worker, que apaga os caches antigos e assume o controle (skipWaiting e clients.claim), então os usuários recebem os novos arquivos na próxima visita.
Posso instalar o Gerador de Manifest PWA como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Manifest PWA é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.