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

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.

Houssein Djirdeh

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

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.

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

1. 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.
2. 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.