Web App Manifest (manifest.json)
Um web app manifest é um arquivo JSON (geralmente manifest.json ou site.webmanifest) referenciado no head da página que informa aos navegadores como o seu site deve se comportar quando instalado em uma tela inicial ou launcher. Ele fornece o nome do app, o conjunto de ícones, as cores de tema e de fundo, e o modo de exibição. Sem um, um navegador não vai oferecer a instalação do site como um PWA.
O que o manifest declara
O manifest é um pequeno documento JSON referenciado com <link rel="manifest">. Quando um usuário instala o site, o navegador o lê para nomear o app, escolher um ícone, colorir a tela de abertura e decidir quanto da interface do navegador mostrar.
Ele só importa para a instalabilidade e o comportamento na tela inicial. Uma aba de navegador comum nunca precisa dele (as tags de link de favicon cobrem isso), e é por isso que muitos sites não têm nenhum manifest.
Um manifest mínimo
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111111",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Campos principais
| Campo | Finalidade |
|---|---|
| name / short_name | Os rótulos completo e da tela inicial |
| icons | O conjunto de ícones de instalação e de tela inicial |
| display | Quanta interface do navegador um app instalado mostra |
| theme_color | Colore a interface do SO ao redor do app |
| background_color | A cor da tela de abertura no lançamento |
| start_url | A página que o app instalado abre |
Perguntas frequentes sobre web app manifest
Preciso de um web app manifest?
Apenas se você quiser que o site seja instalável como um PWA ou controlar sua aparência na tela inicial. Um site comum com apenas um favicon não exige um.
Qual a diferença entre manifest.json e site.webmanifest?
Nada além do nome do arquivo. Ambos são o mesmo web app manifest; o navegador usa o arquivo para o qual o seu <link rel="manifest"> aponta.
Onde referencio o manifest?
No head da página, com <link rel="manifest" href="/site.webmanifest">. Um link em toda página que deva ser instalável.