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.
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.
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
. - 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.
Conclusão #
- 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. - 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.