Web App Manifest para personalizar sua Progressive Web App

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.

Web App Manifest para personalizar sua Progressive Web App
Seus amigos merecem saber desse conteúdo?

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

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.

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.