Skip to content
Sobre Blog Aprender Explorar padrões Case studies
Nesta página
  • Por que isso é útil?
  • Modifique o manifesto padrão
  • Conclusão

Adicionar um manifesto de aplicativo da web com Create React App

Um manifesto de aplicativo da web está incluído em Create React App por padrão e permite que qualquer pessoa instale seu aplicativo React em seu dispositivo.

Apr 29, 2019 — Atualizado May 19, 2021
Available in: English e Español
Appears in: React
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
Nesta página
  • Por que isso é útil?
  • Modifique o manifesto padrão
  • Conclusão
Se você não sabe como os arquivos de manifesto do aplicativo da web funcionam, consulte o primeiro o guia Adicionar um manifesto do aplicativo da web.

Criar Aplicativo React (CRA) inclui um manifesto de aplicativo da web por padrão. A modificação deste arquivo permitirá que você altere a forma como seu aplicativo é exibido quando instalado no dispositivo do usuário.

Um ícone de progressive web app na tela inicial de um telefone celular

Por que isso é útil? #

Os arquivos de manifesto do aplicativo da Web fornecem a capacidade de alterar a aparência de um aplicativo instalado na área de trabalho ou dispositivo móvel do usuário. Ao modificar as propriedades no arquivo JSON, você pode modificar uma série de detalhes em seu aplicativo, incluindo:

  • Nome
  • Descrição
  • Ícone do aplicativo
  • Cor do tema

A documentação do MDN cobre todas as propriedades que podem ser alteradas em detalhes.

Modifique o manifesto padrão #

No CRA, um arquivo de manifesto padrão, /public/manifest.json, é incluído automaticamente quando um novo aplicativo é criado:

{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

Isso permite que qualquer pessoa instale o aplicativo em seu dispositivo e veja alguns detalhes padrão do aplicativo. O arquivo HTML, public/index.html , também inclui um <link> para carregar o manifesto.

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Aqui está um exemplo de um aplicativo desenvolvido com CRA que possui um arquivo de manifesto modificado:

Para descobrir se todas as propriedades estão funcionando corretamente neste exemplo:

  • To preview the site, press View App. Then press Fullscreen fullscreen. - Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  • Click the Application tab.

  • No painel do Aplicativo, clique na guia Manifesto.

A guia Manifesto do DevTools mostra as propriedades do arquivo de manifesto do aplicativo.

Conclusão #

  1. Se você estiver construindo um site que você acha que não precisa ser instalado em um dispositivo, remova o manifesto e o <link> no arquivo HTML que aponta para ele.
  2. Se desejar que os usuários instalem o aplicativo em seus dispositivos, modifique o arquivo de manifesto (ou crie um se não estiver usando o CRA) com as propriedades de sua preferência. A documentação MDN explica todos os atributos obrigatórios e opcionais.
Last updated: May 19, 2021 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.