Web App Manifest PWA

Tempo de leitura: 3 minutos

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.json na 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: