O manifesto de aplicativo Web

Um manifesto de aplicação web é um arquivo JSON que informa ao navegador como instalar a página como um aplicativo: qual nome usar, qual ícone exibir, qual URL iniciar, qual esquema de cores aplicar e em qual modo de exibição renderizar (autônomo, tela cheia ou navegador).

Faça referência ao manifesto em todas as páginas que devem ser instaláveis: <link rel="manifest" href="/manifest.webmanifest"> no cabeçalho. O navegador o busca uma vez e o armazena em cache; as atualizações do manifesto são aplicadas em carregamentos posteriores.

Para que o navegador ofereça "Instalar aplicativo", o manifesto precisa ter pelo menos: name (nome completo), short_name (rótulo da tela inicial, com cerca de 12 caracteres), start_url, display (geralmente "standalone") e uma matriz icons com pelo menos um PNG de 192x192 e outro de 512x512.

A URL aberta quando o ícone do aplicativo instalado é tocado. Geralmente é / para a página inicial; pode incluir parâmetros de consulta para análises: "start_url": "/?source=pwa" identifica distintamente as sessões instaladas das sessões no navegador.

display pode ser "browser" (elementos normais do navegador), "minimal-ui" (alguns elementos do navegador), "standalone" (sem elementos do navegador — parece um aplicativo) ou "fullscreen" (sem barra de status). Standalone é a escolha típica para uma PWA.

Inclua um ícone com finalidade "maskable" para que o Android possa aplicar uma máscara ao ícone e combiná-lo com os demais ícones da tela inicial: { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }. Ícones com máscara incluem uma zona segura para que o sistema possa recortá-los.

theme_color define a tonalidade da barra de endereço quando o aplicativo é executado em um navegador. background_color é exibida como fundo da tela inicial antes de a página carregar. Combine-as com as cores principais do seu sistema visual para uma inicialização refinada.

"orientation": "portrait" bloqueia o aplicativo no modo retrato quando instalado. "any", "landscape" e "portrait-primary" são alternativas. A maioria das PWAs de uso geral deixa esse campo sem definição e permite que a orientação do dispositivo decida.

Para que o navegador exiba "Instalar", a página deve ser servida por HTTPS, registrar um service worker que trate eventos de busca, vincular um manifesto válido com os campos mínimos e atender aos critérios de interação (o usuário precisa ter interagido com a página).

Os navegadores armazenam o manifesto em cache. Para forçar uma atualização depois de editar, altere as URLs dos ícones (um parâmetro de consulta para evitar o cache funciona) ou aguarde — a maioria dos navegadores faz novas verificações periodicamente. Não existe uma API para forçar a atualização; projete considerando que os usuários podem executar um manifesto ligeiramente desatualizado por algum tempo.

A guia Application do Chrome DevTools mostra o manifesto analisado, os valores calculados e os erros de validação. A auditoria PWA do Lighthouse verifica cada requisito de instalação e informa o que está faltando. Use ambos durante o desenvolvimento para confirmar a elegibilidade para instalação.

O que o valor display: "standalone" em um manifesto de aplicação web faz?

O manifesto de aplicação web (manifest.webmanifest) informa ao navegador como instalar sua página como um aplicativo: name, short_name, start_url, display, theme_color, icons (192 e 512, além de maskable para Android). Vincule-o por meio de <link rel="manifest">, garanta HTTPS + service worker para permitir a instalação e teste no Chrome DevTools e na auditoria PWA do Lighthouse.