Guia do web app manifest: um manifest.json de verdade, campo por campo
O web app manifest é um pequeno arquivo JSON que informa ao SO como instalar o seu site: seu nome, seus ícones e suas cores. Aqui está um de verdade, campo por campo.
Para que serve o manifest
O manifest é o que transforma um site em algo que o SO pode instalar. Quando um usuário adiciona seu site a uma tela inicial, o navegador lê o manifest para decidir o ícone, o nome abaixo dele, a tela de splash e se o app abre com ou sem a interface do navegador.
É JSON puro. Você precisa de um arquivo, linkado de todas as páginas, mais os PNGs de ícone para os quais ele aponta. Cada campo abaixo corresponde a algo que o usuário vê.
Os campos que importam
| Campo | O que controla |
|---|---|
| name | O nome completo do app, exibido no prompt de instalação e na tela de splash |
| short_name | O nome sob o ícone da tela inicial, onde o espaço é apertado |
| icons | O conjunto de ícones. Inclua PNGs 192 e 512, mais um marcado como maskable para as formas do Android |
| theme_color | A cor da interface do SO ao redor do app, como a barra de status |
| background_color | O fundo da tela de splash exibido enquanto o app carrega |
| display | Como o app abre. standalone esconde a interface do navegador para parecer nativo |
| start_url | A página que o app abre quando iniciado pela tela inicial |
Um manifest.json completo
{
"name": "Acme Dashboard",
"short_name": "Acme",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0b0b0f",
"background_color": "#0b0b0f",
"display": "standalone",
"start_url": "/"
}Dois ícones padrão e um maskable, para que o Android possa recortar em qualquer forma de launcher sem cortar o seu logo.
Conecte-o às suas páginas
<link rel="manifest" href="/manifest.json">Coloque isto no <head> de todas as páginas. Sem a tag link, o arquivo existe mas nada o lê.
Dúvidas comuns
O que é um web app manifest?
Um pequeno arquivo JSON que informa ao navegador e ao SO como instalar o seu site: seu nome, ícones, cores e como deve abrir. É o que torna uma página instalável em uma tela inicial.
Qual a diferença entre theme_color e background_color?
theme_color colore a interface do SO ao redor do app, como a barra de status. background_color preenche a tela de splash exibida enquanto o app carrega. Costumam ter o mesmo valor, mas controlam superfícies diferentes.
Onde coloco o manifest.json?
Sirva-o de um caminho estável como a raiz do seu site, depois referencie-o com <link rel="manifest" href="/manifest.json">. Os ícones que ele lista precisam resolver a partir dos caminhos nos campos src.
Preciso de um manifest para um site comum?
Só se você quiser prompts de instalação e ícones de tela inicial. Um site informativo simples funciona bem sem um, mas qualquer site que os usuários possam salvar em um celular se beneficia dele.