Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Manifesto de Aplicativo Web PWA

DadosDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático

Identidade do Aplicativo

Nome

Nome completo do aplicativo exibido no prompt de instalação e na tela de boas-vindas

Nome Curto

Usado na tela inicial (recomendado: 12 caracteres ou menos)

Descrição

Lang

Idioma principal (rótulo BCP 47, por exemplo, en-US, fr, de-DE)

Direção do Texto

Navegação

URL de Início

URL aberta quando o aplicativo é iniciado

Escopo

Limite de navegação para o aplicativo (opcional)

ID do Aplicativo

Identidade única do aplicativo (opcional, recomendado)

Exibição

Modo de Exibição

Orientação

Cor do tema

Cor da barra do navegador e da barra de status quando o aplicativo está aberto

Cor de fundo

Cor de fundo na tela de boas-vindas enquanto o aplicativo carrega

Ícones

Caminho Base dos Ícones

Caminho da pasta onde os arquivos de ícone estão (usado para construir URLs de origem)

Padrão de Nome do Ícone

Use {size} como substituto — substituído por cada tamanho selecionado

Tipo MIME do Ícone

Finalidade do Ícone

Incluir 72×72

Incluir 96×96

Incluir 128×128

Incluir 144×144

Incluir 152×152

Incluir 192×192

Incluir 384×384

Incluir 512×512

SAÍDA

Lado cliente

manifest.json

Tag de Link HTML

ANUNCIADO Remover?

Guia

Gerador de Manifesto de Aplicativo Web PWA

Gerar um arquivo válido manifest.json para seu Progressive Web App em segundos. Preencha a identidade do seu aplicativo, escolha um modo de exibição, escolha os tamanhos de ícone que você distribui, e o gerador produzirá JSON limpo que você pode colocar diretamente no seu projeto — além do correspondente <link rel="manifest"> tag para seu HTML.

Como usar

Digite a identidade do seu aplicativo Nome e Nome Curto. O nome completo aparece no prompt de instalação; o nome curto é exibido abaixo do ícone na tela inicial.
Defina o URL de Início, Escopo, e opcional ID do Aplicativo para que o navegador saiba o que lançar e como definir a navegação.
Escolha um Modo de Exibição (independente, tela cheia, interface mínima, navegador) e um Orientação.
Escolha um Cor do tema (chrome do navegador) e um Cor de fundo (tela de boas-vindas).
Defina o Caminho Base dos Ícones e um Padrão de Nome do Ícone usando {size} como substituto, então marque os tamanhos de ícone que você realmente distribui.
Copie o gerado manifest.json ou clique no ícone de download. Cole a <link rel="manifest"> tag em seu <head>.

Características

Todos os campos padrão do manifesto – nome, short_name, descrição, lang, dir, id, start_url, scope, display, orientation, theme_color, background_color.
Lista de tamanhos de ícone – 72, 96, 128, 144, 152, 192, 384 e 512 px, com URLs automaticamente geradas a partir de um caminho base e um padrão de nome de arquivo. src Suporte à finalidade do ícone
– qualquer, maskable, “qualquer maskable” e monocromático. Visualização em tempo real do JSON
– JSON formatado e atualizado em tempo real conforme você digita, com destaque de sintaxe. Verificações de instalação
– avisa quando nome, start_url ou o par recomendado de ícones 192x192 e 512x512 estão ausentes. – cópia em um clique, ou baixe como
Copiar ou baixar com o tipo MIME correto. manifest.json Tag de link HTML
– trecho pronto para colar . <link rel="manifest"> – nada sai do seu navegador. Sem contas, sem limites.
100% do lado do cliente O que é um manifesto de aplicativo web?

 Perguntas frequentes

Um manifesto de aplicativo web é um arquivo JSON que informa ao navegador como o seu Progressive Web App deve se comportar quando instalado. Ele contém o nome do aplicativo, ícones, URL de início, modo de exibição, cores temáticas e outros metadados usados pelo prompt de instalação, tela de boas-vindas e lançador na tela inicial.

Quais campos são obrigatórios para que um PWA seja instalável?
Como mínimo, os navegadores esperam name (ou short_name), start_url, display definido como standalone, fullscreen ou minimal-ui, e pelo menos um ícone de 192x192 e um de 512x512. Adicionar theme_color e background_color é fortemente recomendado para uma experiência de instalação refinada.

Qual a diferença entre os modos de exibição?
standalone oculta a interface do navegador e parece um aplicativo nativo. fullscreen também oculta a barra de status, útil para jogos. minimal-ui mantém um conjunto reduzido de controles do navegador. browser abre o aplicativo em uma aba normal. A maioria dos PWAs escolhe standalone.

O que significa o campo de finalidade do ícone?
purpose informa ao navegador como um ícone pode ser renderizado. any é o padrão e permite que o navegador composta o ícone da forma que desejar. maskable significa que a imagem foi projetada para preencher uma zona segura definida pelo sistema operacional, permitindo que o lançador corte o ícone em forma de círculo, squircle ou quadrado arredondado sem cortar conteúdo importante.

Onde devo colocar manifest.json e a tag de link?
Coloque manifest.json na raiz do seu site ou em um caminho estável, depois referencie-o de todas as páginas HTML com uma tag dentro do . Certifique-se de que o arquivo seja servido com o tipo de conteúdo application/manifest+json.

Meu Aplicativo Fantástico