Web App Manifest PWA: O Web App Manifest é um arquivo JSON essencial que fornece ao navegador todas as informações necessárias para instalar um Progressive Web App (PWA) e integrá-lo ao sistema operacional do usuário. Ele define como o PWA deve se comportar e aparecer quando lançado a partir da tela inicial (ou desktop).
Sem um Manifest válido e bem configurado, seu PWA não pode ser instalado, perdendo um de seus principais recursos.
1. ⚙️ Como Implementar o Manifest
A implementação é um processo de duas etapas: criar o arquivo e linká-lo no HTML.
- Criação do Arquivo: Crie um arquivo com o nome
manifest.jsonna pasta raiz do seu projeto. - Inclusão no HTML: Linke o arquivo dentro da tag
<head>da sua página inicial:
HTML
<head>
<link rel="manifest" href="/manifest.json">
</head>
Depuração Rápida
Para verificar se o seu Manifest está sendo lido corretamente e se está livre de erros, você deve usar as Ferramentas do Desenvolvedor do seu navegador, geralmente na aba Application (Aplicativo) –> Manifest.
2. 🔑 Campos Essenciais para Instalação
Esses campos são o mínimo necessário para que seu PWA passe nos testes de elegibilidade para instalação (A2HS – Add to Home Screen).
| Campo | Propósito | Exemplo |
name | Nome completo, exibido durante o processo de instalação. | "Meu Aplicativo de Vendas" |
short_name | Nome abreviado, usado sob o ícone na tela inicial. | "Vendas App" |
start_url | URL que o PWA deve carregar quando iniciado. | "/" (raiz) ou "/home.html" |
display | Define o modo de exibição. O mais comum é standalone (abre o PWA em sua própria janela, sem a barra de endereço do navegador). | "standalone" |
icons | Array de objetos que define o caminho, tamanho e tipo dos ícones. | Ver seção a seguir. |
theme_color | Cor da interface do usuário do navegador (como a barra de status ou barra de título). | "#007bff" |
background_color | Cor da tela de splash screen (carregamento inicial) enquanto o PWA está carregando. | "#ffffff" |
Configuração de Ícones
É fundamental fornecer ícones em vários tamanhos para garantir que o sistema operacional encontre o recurso visual ideal para cada contexto (notificações, barra de tarefas, splash screen, etc.).
JSON
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-maskable-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable" // Essencial para ícones adaptativos no Android
}
]
3. ✨ Campos Recomendados para uma UX Aprimorada
Estes campos não são obrigatórios para a instalação, mas melhoram significativamente a experiência do usuário e a integração com o sistema.
| Campo | Propósito | Exemplo de Uso |
description | Texto exibido na interface de instalação ou em resultados de busca de aplicativos. | "Acompanhe seus pedidos em tempo real." |
scope | Restringe as URLs que pertencem ao escopo do aplicativo. As navegações para fora desse escopo abrem o navegador padrão. | "/app/" |
orientation | Força a orientação de tela preferida ao iniciar o PWA. | "portrait" ou "landscape" |
shortcuts | Permite definir atalhos para ações específicas, acessíveis ao pressionar e segurar o ícone do PWA (semelhante ao menu de contexto de aplicativos nativos). | [{ "name": "Novo Pedido", "url": "/novo" }] |
✅ Conclusão
O Web App Manifest é o pilar que garante a instalabilidade e a identidade visual do seu PWA. Ao configurar corretamente campos essenciais como name, start_url, display: standalone e o array icons, você transforma uma página web em um aplicativo integrado ao sistema operacional do usuário, proporcionando um acesso rápido e uma experiência fluida.
Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:
E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados:
