Web App Manifest para personalizar sua Progressive Web App

Progressive Web App (PWA) requer um arquivo chamado Manifest, para se tornar mais atraente. Temos, então, o Web App Manifest.

PWA é baseada em três pilares:

1. Ser confiável;
2. Ser rápido e
3. Ser atraente.

Com o Web App Manifest  temos o controle da aparência da interface, determinando que a exibição em tela normal ou full screen, use a orientação retrato ou paisagem e várias outras possibilidades.

Sobre o arquivo de Web App Manifest

O arquivo é um documento em JSON, nomeado como manifest.json, que fornece meta dados para a Progressive Web App.

O arquivo fica armazenado no servidor onde a página está hospedada.

Como implementar

A implementação é simples e realizada através de tag HTML.

<link rel="manifest" href="https://blog.apiki.com/manifest.json">

Exemplo de estrutura

Como o Web App Manifest é feito em JSON sua estrutura é simples, legível, de fácil codificação e entendimento.

{
  "short_name": "Apiki Blog",
  "name": "Blog sobre WordPress da Apiki",
  "icons": [
    {
      "src": "icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "https://blog.apiki.com/?pwa_launcher=true"
}

O Web App Manifest para PWA tem várias opções disponíveis para personalizar a experiência e interação com o usuário e o dispositivo.

As opções do Web App Manifest

Algumas alternativas do manifesto são necessárias em casos bem específicos de aplicações.

Outras são praticamente requeridas, por serem o mínimo para definirmos uma boa experiência.

As opções são as seguintes:

Opção	Valor	O que faz
background_color	Cor no padrão CSS	Define uma cor de fundo enquanto ao App é carregado, somente.
description	String	Informa o objetivo do App, seu propósito
dir	rtl, ltr ou auto	Defina a direção do texto nas especificações do manifesto
display	fullscreen, standalone, minimal-ui, browser	Defina o modo primário que o navegador de internet deve considerar para exibir sua aplicação.
icons	Array de objetos com os possíveis valores: sizes, src, type	Define os ícones representativos do App.
lang	Exemplo: pt-BR	Define o idioma utilizado
name	String	Especifica o nome do App.
orientation	any, natural, landscape, landscape-primary, landscape-secondary, portrait portrait-primary, portrait-secondary.	Define a orientação de como exibir o App
prefer_related_applications	Boolean	Informa se há uma outra aplicação complementar
related_applications	Array de objetos de aplicações com os possíveis valores: platform, url e id	Define as aplicações complementares.
scope	URL	Define o escopo, limite, das páginas a serem consideradas como PWA
short_name	String	Informa um nome curto a ser utilizado em espaço menores de tela
start_url	URL	Especifica a URL inicia para o quando o dispositivo acessar a PWA
theme_color	String	Define uma cor para personalizar a interface do dispositivo em uso

Geradores de Web App Manifest

É ideal para você criar seu arquivo de manifesto na “unha”, ou fazer uso de geradores.

Esses geradores têm opções disponíveis e campos de formulário para o preenchimento.

Um arquivo manifest.json é gerado para você utilizar em sua Progressive Web App.

• Web App Manifest Generator
• Generate your Progressive Web App

Conclusão

Progressive Web App é uma tendência crescente.

Considerando seu pilar de ser atraente, o Web App Manifest e suas opções se faz necessário.

Podemos pensar e controlar a experiência do usuário da melhor forma possível.

Quanto melhor a experiência, maior o engajamento, maior o tempo em contato com a sua marca e boas chances de negócios acontecerem.