Blog sobre WordPress
No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
Cadastrar e-mail
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
No Result
View All Result
Blog sobre WordPress
No Result
View All Result
banner-horizontal-3

Início » WordPress Mobile » Web App Manifest para personalizar sua Progressive Web App

Web App Manifest para personalizar sua Progressive Web App

Um dos pilares da PWA é ser atraente. Através do manifest.json, conseguimos definir a aparência e personalizar a experiência de uso.

Leandro Vieira by Leandro Vieira
5 anos ago
Reading Time: 3 min
0
Web App Manifest para personalizar sua Progressive Web App
Compartilhe no FacebookCompartilhe no LinkedIn
Audio

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

Conteúdo relacionado

O conceito e aplicabilidade do Mobile First

WordPress e o desenvolvimento de aplicativos móveis

Não use Design Adaptativo. Considere o Design Responsivo

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">
Você sabe como implementar o arquivo manifest.json em sua página?

Click To Tweet

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
As opções de personalização da PWA através do Web App Manifest

Click To Tweet

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.

Tags: appsJSONPWA
Share8Share1SendShare
Previous Post

O que você precisa saber sobre Continuous Integration

Next Post

Otimização de imagens e os desafios relacionados

Leandro Vieira

Leandro Vieira

Uma das grandes referências de WordPress no Brasil, entusiasta e evangelista da plataforma. Fundador e CEO da Apiki, empresa especializada no desenvolvimento web com WordPress.

Related Posts

Como personalizar sua mobile branding no Google
WordPress Mobile

Como personalizar sua mobile branding no Google

4 de agosto de 2020
Twitter Card – o recurso para seu tweet ir além dos 140 caracteres
WordPress Mobile

Twitter Card – o recurso para seu tweet ir além dos 140 caracteres

28 de julho de 2020
Como implementar Mobile First
WordPress Mobile

Como implementar Mobile First em projetos WordPress

15 de janeiro de 2021
O protocolo Open Graph no WordPress
WordPress Mobile

O protocolo Open Graph no WordPress

15 de janeiro de 2021
Next Post
Otimização de imagens e os desafios relacionados

Otimização de imagens e os desafios relacionados

O Google Chrome está marcando suas páginas como “não seguras”?

O Google Chrome está marcando suas páginas como “não seguras”?

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

banner-lateral-3
Receba no seu e-mail uma série de conteúdos sobre Infra para WordPress.
  • Este campo é para fins de validação e não deve ser alterado.

Facebook LinkedIn Instagram Twitter Youtube Github RSS

Sobre a Apiki

Empresa especializada em WordPress com três unidades de negócios.

  1. Design e Desenvolvimento;
  2. Infra e Hospedagem;
  3. Suporte e manutenção.

Em resumo, só fazemos uma coisa em WordPress: tudo.

Páginas do Apiki.com

  • Apiki.com
  • Sobre a Apiki
  • Hospedagem
  • Desenvolvimento
  • UX & UI para WordPress
  • Growth em WordPress
  • Suporte
  • Atendimento

Páginas do Blog

  • Sobre
  • Newsletter
  • Desenvolvimento WordPress
  • Segurança para WordPress
  • WordPress Mobile
  • Infra para WordPress
  • WordPress SEO
  • WordPress Performance
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.

No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.