Adicionar um manifesto de app da Web com o app Create React

Um manifesto de app da Web é incluído no Create React App por padrão e permite que qualquer pessoa instale o aplicativo React no dispositivo.

Houssein Djirdeh

Observação : se você não sabe como os arquivos de manifesto do app da Web funcionam, consulte primeiro o guia Adicionar um manifesto de app da Web.

Por padrão, o Create React App (CRA) inclui um manifesto de app da Web. A modificação desse arquivo permite que você mude a forma como o aplicativo é exibido quando instalado no dispositivo do usuário.

Por que isso é útil?

Os arquivos de manifesto do app da Web oferecem a capacidade de mudar a aparência de um aplicativo instalado no computador ou no dispositivo móvel do usuário. Ao modificar as propriedades no arquivo JSON, você pode modificar vários detalhes no seu aplicativo, incluindo:

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

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

Modificar o manifesto padrão

No 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 no próprio 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" />

Veja um exemplo de aplicativo criado com CRA que tem um arquivo de manifesto modificado:

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

1. Se você está criando um site e acha que não precisa ser instalado em um dispositivo, remova o manifesto e o elemento <link> do arquivo HTML que aponta para ele.
2. Se você quiser que os usuários instalem o aplicativo no dispositivo, modifique o arquivo de manifesto (ou crie um, se não estiver usando CRA) com as propriedades que quiser. A documentação do MDN explica todos os atributos obrigatórios e opcionais.