Benefícios do Manifest.json
Apple, Google e Microsoft continuam apostando no Web App Manifest. Preencha-o uma vez e seus ícones, theme color e analytics se encaixam em todo lugar.
O que o manifest te dá
| Benefício | O que você ganha |
|---|---|
| Prompts de instalação que parecem nativos | Chrome, Edge e Android exibem banners de “Instalar app” somente se o seu manifest declarar icons, name, start_url e o modo de display. |
| Splash screens prontas para offline | O manifest te dá controle sobre as imagens de splash, as cores de fundo e os ícones maskable para que o lançamento offline pareça intencional. |
| Metadados consistentes em todo lugar | Quando mecanismos de busca ou plataformas sociais inspecionam seu manifest, eles pegam o mesmo título, theme color e ícones que você curou. |
Anatomia de um manifest moderno
Estes são os campos que o Lighthouse e o Android realmente inspecionam antes de exibir o seu ícone.
| Campo | Por que existe | Dica profissional |
|---|---|---|
| name & short_name | Controla o banner de instalação e o texto do rótulo no launcher. | Mantenha short_name com menos de 12 caracteres para que não seja truncado nas telas iniciais do Android. |
| icons[] | Define quais PNGs alimentam as superfícies de instalação, as splash screens e os logos maskable. | Inclua os tamanhos 192, 256, 384 e 512 com purpose: "any maskable" para a melhor cobertura. |
| start_url | Determina qual rota abre quando o usuário inicia o app a partir do dock. | Acrescente ?source=pwa e leia esse valor no servidor para personalizar a analytics. |
| display | Alterna entre as experiências standalone, fullscreen ou minimal-ui. | Use standalone mais theme_color para combinar com o chrome da sua marca. |
Onde os ícones do manifest começam
JSON inicial
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/?source=pwa",
"display": "standalone",
"scope": "/",
"background_color": "#0f172a",
"theme_color": "#312e81",
"icons": [
{ "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/android-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}Coloque este arquivo em /public/manifest.json e o gerador dentro do Favicon Tools manterá o array de ícones atualizado sempre que você exportar um novo conjunto.
Checklist de release
Mantenha isto colado no seu painel de deploy para que o manifest continue preciso após rebrandings.
- 1
Sirva e vincule o manifest
Sirva o manifest em /manifest.json e exponha-o por meio de <link rel="manifest" href="/manifest.json">.
- 2
Verifique se todo ícone resolve
Garanta que cada ícone referenciado realmente exista na sua CDN e corresponda ao tamanho declarado.
- 3
Alinhe o chrome do navegador
Adicione as meta tags theme-color e background_color para alinhar o chrome do navegador com a paleta do seu ícone.
- 4
Faça lint e auditoria antes do release
Rode npx next lint mais a auditoria de PWA do Lighthouse antes de cada release para pegar campos ausentes no manifest.
- 5
Defina o escopo do app instalado
Aponte o scope do manifest para a URL principal do seu app para que os atalhos instaláveis permaneçam dentro do seu domínio.
Automatize as atualizações
Guarde o template do seu manifest ao lado da configuração dos ícones. Quando o CI construir um novo conjunto de favicons, atualize o JSON e faça o redeploy junto.
Teste como um app nativo
Instale seu site no iOS, no Android e no Chrome desktop. Verifique se a splash screen, a máscara do ícone e a theme color correspondem aos valores do manifest.
Times de QA gostam de um checklist simples: instalar, iniciar offline, inspecionar a qualidade do ícone, verificar o parâmetro de analytics.