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

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

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

A guia &quot;Manifest&quot; da DevTool mostra as propriedades do arquivo de manifesto do app.

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.