A Black Friday 2019 e a relação com o Mobile First
Na Black Friday 2019, 55% dos pedidos foram realizados a partir de um celular. Você estava preparado, vai se preparar ou ainda duvida do Mobile First?
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.
