Qual a diferença entre standalone e minimal-ui?

Standalone esconde toda a barra do navegador e a app parece nativa. Minimal-ui mantém um par de controles no topo (geralmente voltar e recarregar). Fullscreen tira até a barra de status e funciona bem para jogos.

Quais tamanhos de ícone eu realmente preciso?

No mínimo PNGs de 192×192 e 512×512 — Chrome e Edge usam esses para tela inicial e splash. Acrescente 144×144 para tiles antigos do Windows e um 512×512 com `purpose: maskable` para o Android cortar sem perder detalhe.

Por que preciso de name e short_name?

`name` aparece no aviso de instalação e na gaveta de apps; `short_name` aparece embaixo do ícone na tela inicial, onde só cabem cerca de 12 caracteres. Sem ele o sistema corta name de forma feia na maioria dos celulares.

Onde fica o arquivo manifest.json?

Salve como `manifest.json` (ou `manifest.webmanifest`) na raiz do site e ligue pelo ` ` com ` `. O navegador baixa na primeira carga da página.

Só o manifest já torna o site instalável?

Não. O navegador também exige um service worker que trate o evento `fetch`, HTTPS e pelo menos um ícone 192×192. O manifest é a camada de metadados; o service worker prova que o site roda offline.

Gerador de manifest.json

Crie arquivos de manifesto PWA

manifest.json

Nome do app

Nome curto

Descrição

URL inicial

Escopo

ID do app

Identifica seu app de forma única entre instalações e origens. Deixe em branco para usar start_url. Um caminho como /?app ou qualquer texto estável funciona.

Idioma

Tag BCP 47 do idioma principal do app, ex.: pt-BR ou ar. Deixe em branco para o dispositivo deduzir.

Direção do texto

Categorias

Categorias de loja separadas por vírgulas, ex.: productivity, utilities. Servem para classificar a instalação.

Modo de exibição

Orientação

Cor do tema

Cor de fundo

Ícones

URL de origem

Tamanho

Tipo

Finalidade

URL de origem

Tamanho

Tipo

Finalidade

Verificações de instalação

•Sem ícone mascarável. O Android recorta um ícone quadrado, então adicione um com purpose: maskable.

Pré-visualização

manifest.json

{
  "name": "Meu App",
  "short_name": "App",
  "description": "Um aplicativo web progressivo",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#4A90D9",
  "background_color": "#FFFFFF",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

O que é Gerador de manifest.json?

O Manifest.json Generator ajuda a criar um Web App Manifest completo para Progressive Web Apps. Preencha os detalhes da sua aplicação e obtenha um manifest.json pronto a usar, com todos os campos obrigatórios e opcionais corretamente formatados.

Configure nome, nome curto, descrição, start_url, scope, modo de exibição (standalone, fullscreen, minimal-ui, browser), orientação, cor do tema, cor de fundo e quantos ícones quiser com tamanho, tipo e purpose. A saída segue a especificação W3C Web App Manifest, então Chrome, Edge e Safari reconhecem na hora de 'Adicionar à tela inicial'.

Como usar

Insira as informações básicas da sua aplicação: nome, nome curto, descrição, cor do tema e cor de fundo.
Configure o modo de exibição (standalone, fullscreen, minimal-ui), orientação, URL de início e escopo.
Adicione entradas de ícones com os tamanhos pretendidos, depois copie ou descarregue o ficheiro manifest.json gerado para o seu projeto.

Quando usar

Adicionar 'Instalar app' a um projeto web já existente para que apareça na gaveta de aplicativos.
Personalizar a cor da tela de splash e o ícone de uma PWA interna entregue a funcionários de campo.
Gerar um manifest básico para um boilerplate Next.js ou Vite que não traz um por padrão.

Resultado

Está a converter o seu site de receitas numa PWA. Defina o nome como 'As Minhas Receitas', a cor do tema com o verde da sua marca, o modo de exibição como 'standalone', e gere o manifest para colocar na raiz do projeto.

Perguntas frequentes

Qual a diferença entre standalone e minimal-ui?: Standalone esconde toda a barra do navegador e a app parece nativa. Minimal-ui mantém um par de controles no topo (geralmente voltar e recarregar). Fullscreen tira até a barra de status e funciona bem para jogos.
Quais tamanhos de ícone eu realmente preciso?: No mínimo PNGs de 192×192 e 512×512 — Chrome e Edge usam esses para tela inicial e splash. Acrescente 144×144 para tiles antigos do Windows e um 512×512 com `purpose: maskable` para o Android cortar sem perder detalhe.
Por que preciso de name e short_name?: `name` aparece no aviso de instalação e na gaveta de apps; `short_name` aparece embaixo do ícone na tela inicial, onde só cabem cerca de 12 caracteres. Sem ele o sistema corta name de forma feia na maioria dos celulares.
Onde fica o arquivo manifest.json?: Salve como `manifest.json` (ou `manifest.webmanifest`) na raiz do site e ligue pelo `<head>` com `<link rel='manifest' href='/manifest.json'>`. O navegador baixa na primeira carga da página.
Só o manifest já torna o site instalável?: Não. O navegador também exige um service worker que trate o evento `fetch`, HTTPS e pelo menos um ícone 192×192. O manifest é a camada de metadados; o service worker prova que o site roda offline.

Gerador de manifest.json

manifest.json

Ícones

Verificações de instalação

Pré-visualização

O que é Gerador de manifest.json?

Como usar

Quando usar

Resultado

Perguntas frequentes

Ferramentas relacionadas

Gerador de dados estruturados

Página web para PDF

Gerador de política de privacidade

Gerador de termos de serviço

Gerador de Consentimento de Cookies

Minificador CSS

Gerador de manifest.json

manifest.json

Ícones

Verificações de instalação

Pré-visualização