Um dos pilares da PWA é ser atraente. Através do Web App Manifest conseguimos definir a aparência e personalizar a experiência de uso.
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:
- Ser confiável;
- Ser rápido e
- 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.
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.
