Gerador de Manifest

Gerador de Manifest de Web App - Criar Manifest.json PWA

Uma ferramenta completa para gerar arquivos Web App Manifest (manifest.json) para Progressive Web Apps (PWA). Configure metadados do app, ícones, cores, modos de exibição e mais. Essencial para tornar seu web app instalável em dispositivos móveis e desktop.

O que é um Web App Manifest?

Um Web App Manifest é um arquivo JSON que informa ao navegador sobre sua Progressive Web App (PWA) e como ela deve se comportar quando instalada no dispositivo do usuário.

**Componentes Principais:**

**Informações Básicas:**
• name: Nome completo do app (ex: "Meu App Incrível")
• short_name: Nome curto para tela inicial (máx 12 caracteres)
• description: O que seu app faz
• start_url: URL que carrega quando o app inicia
• scope: Escopo de navegação do app

**Configurações de Exibição:**
• display: Como o app aparece (standalone, fullscreen, etc.)
• orientation: Preferência de orientação da tela
• lang: Código de idioma principal

**Identidade Visual:**
• theme_color: Cor da UI do navegador
• background_color: Fundo da tela de abertura
• icons: Ícones do app em vários tamanhos
• screenshots: Imagens de prévia do app

**Exemplo de Manifest:**
```json
{
"name": "Meu App Incrível",
"short_name": "MeuApp",
"description": "Uma aplicação incrível",
"start_url": "/",
"display": "standalone",
"theme_color": "#2196F3",
"background_color": "#ffffff",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
```

**Por Que Usar:**
• Torna seu web app instalável
• Proporciona experiência semelhante a app nativo
• Controla aparência da tela de abertura
• Define identidade do app no sistema operacional
• Necessário para funcionalidade PWA
• Melhora engajamento do usuário

**Suporte dos Navegadores:**
• Chrome/Edge: Suporte completo
• Safari: Suporte parcial (iOS 11.3+)
• Firefox: Bom suporte
• Samsung Internet: Suporte completo

**Localização:**
Coloque o manifest.json na raiz do seu site e vincule-o no HTML:
```html
<link rel="manifest" href="/manifest.json">
```

Como usar o Gerador de Manifest?

**Passo 1: Informações Básicas**

1. **Nome do App (Obrigatório):**
• Digite o nome completo da aplicação
• Aparece em prompts de instalação e listas de apps
• Exemplo: "Gerenciador de Tarefas Pro"

2. **Nome Curto:**
• Nome abreviado para tela inicial
• Máximo 12 caracteres
• Exemplo: "TaskMgr"
• Usa o nome do app se não fornecido

3. **Descrição:**
• Breve explicação do seu app
• Aparece em lojas de apps e prompts de instalação
• Exemplo: "Gerencie suas tarefas com eficiência"

4. **URL Inicial:**
• URL que carrega quando o app inicia
• Geralmente "/" para raiz
• Pode ser página específica: "/dashboard"

5. **Escopo:**
• Define limites de navegação
• URLs dentro do escopo usam modo app
• Fora do escopo abre no navegador
• Geralmente "/" para incluir todo site

**Passo 2: Configurações de Exibição**

1. **Modo de Exibição:**
• **Standalone** (recomendado): Parece app nativo, sem UI do navegador
• **Tela Cheia**: Tela completa, sem barra de status
• **UI Mínima**: Controles mínimos do navegador
• **Navegador**: Aba normal do navegador

2. **Orientação:**
• **Qualquer**: Permite rotação (padrão)
• **Retrato**: Trava em retrato
• **Paisagem**: Trava em paisagem
• **Retrato/Paisagem Principal**: Orientação específica

3. **Idioma:**
• Código ISO 639-1 (pt, en, es, etc.)
• Padrão: pt

**Passo 3: Tema e Cores**

1. **Cor do Tema:**
• Cor da UI do navegador (barra de endereço, alternador de tarefas)
• Use seletor de cor ou digite código hex
• Exemplo: #2196F3 (azul)
• Visível na barra de status do Android

2. **Cor de Fundo:**
• Fundo da tela de abertura
• Deve combinar com fundo principal do app
• Exemplo: #ffffff (branco)
• Mostra enquanto o app carrega

**Passo 4: Ícones**

1. Clique no botão "Adicionar Ícone"
2. Para cada ícone:
• **URL da Imagem**: Caminho para arquivo do ícone
• **Tamanhos**: Dimensões (192x192, 512x512)
• **Tipo**: Formato da imagem (PNG, JPEG, SVG)
• **Propósito**: Any, Maskable, Monochrome

**Ícones Recomendados:**
• 192x192: Mínimo para prompt de instalação
• 512x512: Alta resolução para tela de abertura
• Maskable: Ícones adaptativos (design de zona segura)

**Passo 5: Capturas de Tela (Opcional)**

1. Clique em "Adicionar Captura"
2. Para cada captura:
• **URL da Imagem**: Caminho para captura de tela
• **Tamanhos**: Resolução (1280x720, 750x1334)
• **Plataforma**: Wide (desktop) ou Narrow (mobile)
• **Rótulo**: Descrição da tela

**Usadas para:**
• Prompts de instalação
• Lojas de apps
• Menus de compartilhamento

**Passo 6: Informações Adicionais**

1. **Categorias:**
• Lista separada por vírgulas
• Disponíveis: negócios, educação, entretenimento, finanças, fitness, comida, jogos, governo, saúde, infantil, estilo de vida, revistas, médico, música, navegação, notícias, personalização, foto, política, produtividade, segurança, compras, social, esportes, viagem, utilidades, clima

2. **Classificação IARC:**
• ID de classificação de conteúdo
• Opcional, para lojas de apps

**Passo 7: Gerar**

1. Clique em "Gerar Manifest"
2. Revise o JSON gerado
3. Copie ou baixe como manifest.json
4. Envie para a raiz do seu servidor web
5. Vincule no HTML: `<link rel="manifest" href="/manifest.json">`

**Dicas:**
• Use formato PNG para ícones (melhor compatibilidade)
• Forneça múltiplos tamanhos de ícones
• Escolha cor de tema que combine com sua marca
• Teste o manifest com auditoria Lighthouse
• Valide com Validador de Manifest PWA