Manifesto PWA: Criando seu manifesto de aplicativo da Web de maneira fácil

Um manifesto de aplicativo da Web configurado corretamente é crucial para o processo de instalação do seu PWA, pois sem ele todo o processo não é possível. E, surpreendentemente, também não é tão difícil ter o manifesto do seu aplicativo da Web configurado corretamente.

Para que serve?

O manifesto do aplicativo Web é uma parte vital do seu PWA, pois determina como seu aplicativo se apresenta ao usuário na tela inicial e na tela inicial do usuário. Todos esses são estágios iniciais importantes que contribuem para a formação das impressões dos usuários sobre seu aplicativo, e é por isso que é importante que você acerte.

Maneiras de configurar seu manifest.json

Começando do zero

Com um pouco de familiaridade com o formato de dados JSON, você pode criar seu próprio manifesto de aplicativo da Web sem nenhum esforço necessário.

Um manifest.json típico deve se parecer com isto:

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "display": "tela cheia",
    "alcance": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Soluções de comércio eletrônico de próxima geração para Magento",
    "ícones": [
        {
            "src": "/icon-192x192.png",
            "tamanhos": "192x",
            "tipo": "imagem/png"
        },
        {
            "src": "/icon-256x256.png",
            "tamanhos": "256x",
            "tipo": "imagem/png"
        },
        {
            "src": "/icon-384x384.png",
            "tamanhos": "384x",
            "tipo": "imagem/png"
        },
        {
            "src": "/icon-512x512.png",
            "tamanhos": "512x",
            "tipo": "imagem/png"
        }
    ]
}

Você pode deixar algumas partes do código de fora, mas ainda existem alguns membros necessários, sem os quais o usuário não poderá instalar seu PWA:

 nome, nome curto, ícones, exibição, start_url

• name : o nome do seu aplicativo que é exibido sob o ícone do seu aplicativo na tela inicial e em vários outros lugares. Mantenha o valor de sua propriedade de nome curto e simples.

• short-name : Quando o valor da sua propriedade name não couber na tela do usuário, o valor desta propriedade será usado. É recomendável que seu short-name tenha menos de 20 caracteres. Na verdade, atire para 10 caracteres.

• icons : os ícones do seu aplicativo, que podem consistir em várias imagens para diferentes sistemas operacionais e dispositivos. Você pode definir um conjunto de ícones para o navegador usar para adicionar à tela inicial, tela inicial e assim por diante.

Por exemplo, o iOS sozinho requer 4 tamanhos diferentes para 4 de seu dispositivo:

• iPhone: 120 x 120 pixels e 180 x 180 pixels
• iPad Pro: 167 x 167 pixels
• iPad e iPad mini: 152 x 152 pixels

Até o Google Chrome requer pelo menos 2 tamanhos diferentes para usabilidade total no iOS e Android:

• 512 x 512 pixels
• 192 x 192 pixels

Para que seu ícone de imagem seja chamado, um conjunto de propriedades é usado, a saber, src , type e sizes .

• src : o caminho para o arquivo de imagem do ícone
• types : o tipo de arquivo de imagem
• sizes : largura x altura da imagem, em pixels

 "ícones" : [ 
    {
       "src" : "/imgs/icon152.png",
       "tipo": "imagem/png",
       "tamanhos" : "192x192"
    },
    {
       "src" : "/imgs/icon215.png",
       "tipo": "imagem/png",
       "tamanhos" : "512x512"
    }
]

• display : Indica como o aplicativo deve ser exibido. Para uma experiência imersiva e semelhante a um aplicativo, é recomendável defini-lo como fullscreen (sem interface do usuário). No entanto, opções como standalone , minimal-ui também estão disponíveis, que são menos dispendiosas em termos de desempenho, mas têm o custo de perder a experiência imersiva (a barra de status ainda pode ser exibida).

• start_url : indica o caminho a partir do qual seu aplicativo é iniciado. Seu valor start_url pode ser um simples / se seu aplicativo iniciar no mesmo diretório .root em que seu manifest.json está armazenado.

Membros opcionais

Seguir o livro é uma coisa, mas sempre há espaço para você tentar ser melhor. Abaixo estão nossas chaves recomendadas para um manifesto de aplicativo da Web melhor e mais detalhado:

• scope : limita a extensão que um usuário pode ir. Se o usuário navegar fora do escopo, ele reverterá para uma página da Web normal dentro de uma guia ou janela do navegador. Para definir o escopo do seu site, basta colocar um / ou colocar o URL completo do seu site.

Observações :
– O comportamento padrão do scope é o diretório de onde seu manifest.json é servido.
– Qualquer link aberto no aplicativo da web será renderizado na janela do PWA existente. Para abrir qualquer link em uma guia do navegador, você precisa adicionar target="_blank" à tag <a> .
– start_url deve estar no escopo.

• background_color : indica a cor de fundo em determinados contextos de aplicativos. Mais especificamente, este campo pode ser usado para definir a cor de fundo da tela inicial.

• theme_color : indica a cor do tema dos elementos da interface do usuário do aplicativo Web, como a barra de endereço. A alteração é aplicada em todo o site e efetiva somente quando o site é iniciado na tela inicial.

Observações : Suas configurações de nível de página — por exemplo, meta tag theme-color: <meta name="theme-color" content="#3367D6"> — substituirão o valor de seu theme_color no manifesto do aplicativo da web.

• description : Isso deve ser auto-explicativo.

• shortcuts : define atalhos para páginas no aplicativo da web. Os atalhos do aplicativo podem ser acessados ​​pressionando longamente o ícone do iniciador do aplicativo no Android ou clicando com o botão direito do mouse no ícone do aplicativo na barra de tarefas (Windows)/dock (macOS).

 "atalhos" : [
  {
    "name": "Notificações",
    "url": "/usuário/notificações/",
    "description": "Notícias que você perdeu"
  },
  {
    "name": "Criar novo pedido",
    "url": "/criar/pedir"
  },
  {
    "name": "Minha lista de desejos",
    "url": "/usuário/lista de desejos"
  }
]

Usando um gerador de manifesto de aplicativo Web

Uma maneira mais fácil e sem esforço de fazer isso seria usar um gerador de manifesto de aplicativo da Web. O gerador recebe sua entrada e, com base na qual, gera um manifesto de aplicativo da Web totalmente funcional que pode ser usado como está.

Vincule seu manifest.json

Quando tudo estiver configurado corretamente, a próxima etapa é fazer referência ao manifesto do aplicativo Web em seu cabeçalho HTML.

 <link rel="manifest" href="/manifest.webmanifest">

Depois de fazer referência ao manifesto do aplicativo Web, todos os navegadores compatíveis agora devem reconhecer corretamente seu manifest.json . Para obter uma lista completa dos navegadores atualmente suportados, confira CanIUse.

Conclusão

E é isso para um simples manifesto de aplicativo da web. Não deve demorar muito para você criar um manifest.json totalmente funcional. E apenas com alguns ajustes adicionais, seu aplicativo da Web pode ser instalado como qualquer outro PWA.