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

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.