Um manifesto de app da Web é incluído no Create React por padrão e permite que qualquer pessoa instale o aplicativo React no próprio dispositivo.
O Create React App (CRA) inclui um manifesto de app da Web por padrão. Modificando isto permitirá que você altere a forma como o seu aplicativo é exibido quando instalado no dispositivo do usuário.
![Um ícone do Progressive Web App na tela inicial de um smartphone](https://web.dev/static/articles/add-manifest-react/image/a-progressive-web-app-ico-1aeca055d20a7.png?authuser=5&hl=pt-br)
Por que isso é útil?
Os arquivos de manifesto de app da Web fornecem a capacidade de alterar a forma como um aplicativo ficará no computador ou dispositivo móvel do usuário. Modificando propriedades no arquivo JSON, é possível modificar vários detalhes nas do Google, incluindo:
- Nome
- Descrição
- Ícone do app
- Cor do tema
A documentação do MDN abrange todas as propriedades que podem ser alteradas em detalhes.
Modificar o manifesto padrão
Em CRA, um arquivo de manifesto padrão, /public/manifest.json
é incluído automaticamente quando um novo app é 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 elemento <link>
para carregar o manifesto.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Confira um exemplo de aplicativo criado com CRA que tem um manifesto modificado arquivo:
Para descobrir se todas as propriedades estão funcionando corretamente neste exemplo:
- Para visualizar o site, pressione Ver app. Em seguida, pressione
Tela cheia
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
- Clique na guia Aplicativo.
- No painel Aplicativo, clique na guia Manifesto.
Conclusão
- Se você estiver criando um site que acha que não precisa ser instalado em um
dispositivo, remova o manifesto e o elemento
<link>
do arquivo HTML que aponta para ele. - Se você quiser que os usuários instalem o aplicativo em seus dispositivos, modifique no arquivo de manifesto (ou crie um se não estiver usando o CRA) com qualquer propriedades que você gosta. A Documentação do MDN explica todos os atributos obrigatórios e opcionais.