Web App Manifest PWA

PWA
Tempo de leitura: 3 minutos

Os Progressive Web Apps (PWAs) revolucionaram a forma como interagimos com a web, proporcionando experiências mais semelhantes a aplicativos nativos. Uma das peças-chave para transformar um site em uma PWA é o Web App Manifest. Esse arquivo JSON fornece as informações essenciais para que o navegador possa instalar a aplicação na tela inicial do dispositivo e oferecer uma experiência de usuário mais rica e personalizada.

Neste artigo, vamos explorar em detalhes o Web App Manifest, desde a sua criação até a personalização de diversos aspectos da sua PWA.

Como Adicionar o Web App Manifest à Sua PWA

Para adicionar um Web App Manifest à sua PWA, basta criar um arquivo JSON com o nome manifest.json e incluí-lo no <head> da sua página HTML.

HTML

<head>
  <link rel="manifest" href="/manifest.json">
</head>

O navegador irá buscar esse arquivo e utilizar as informações nele contidas para exibir a PWA de forma adequada.

Depuração do Manifest nos Navegadores

A maioria dos navegadores modernos oferece ferramentas para depurar e inspecionar o Web App Manifest. Essas ferramentas permitem visualizar o conteúdo do manifesto, identificar erros e testar diferentes configurações.

  • Chrome DevTools: Abra as DevTools, vá para a aba “Application” e procure pela seção “Manifest”.
  • Firefox Developer Tools: Abra as DevTools, vá para a aba “Manifest”.
  • Edge DevTools: Abra as DevTools, vá para a aba “Application” e procure pela seção “Manifest”.

Campos Básicos do Web App Manifest

Os campos básicos do Web App Manifest incluem:

  • name: O nome da aplicação que será exibido na tela inicial.
  • short_name: Uma versão mais curta do nome, utilizada em espaços menores.
  • start_url: A URL da página inicial da aplicação.
  • display: Define o modo de exibição da aplicação (standalone, fullscreen, minimal-ui, browser).
  • background_color: A cor de fundo que será exibida enquanto a aplicação está carregando.
  • theme_color: A cor do tema que será utilizada pelo navegador.

Ícones

Os ícones são uma parte essencial do Web App Manifest. Eles definem a aparência da aplicação na tela inicial e em outros locais do sistema.

JSON

"icons": [
  {
    "src": "/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]

É recomendado fornecer ícones em diferentes tamanhos para garantir a melhor experiência visual em diferentes dispositivos.

Campos Recomendados

Além dos campos básicos, existem outros campos que podem ser utilizados para personalizar ainda mais a experiência do usuário:

  • description: Uma breve descrição da aplicação.
  • orientation: A orientação preferencial da aplicação (portrait, landscape).
  • scope: Define o escopo da aplicação, ou seja, as URLs que ela pode controlar.

Campos Estendidos

Os campos estendidos permitem adicionar funcionalidades mais avançadas à sua PWA:

  • related_applications: Define aplicativos relacionados, como versões nativas da sua aplicação.
  • prefer_related_applications: Indica se o navegador deve preferir o aplicativo relacionado em vez da PWA.

Campos Promocionais

Os campos promocionais permitem adicionar informações adicionais para promover a sua PWA:

  • screenshots: Uma lista de screenshots da aplicação.
  • start_url: A URL para uma página específica da aplicação, caso seja diferente da página inicial.

Campos de Recursos

Os campos de recursos permitem definir os recursos que serão pré-carregados pela aplicação:

  • shortcuts: Define atalhos personalizados para diferentes partes da aplicação.

Conclusão

O Web App Manifest é uma ferramenta poderosa para personalizar a experiência do usuário em sua PWA. Ao configurar corretamente o manifesto, você pode garantir que sua aplicação seja instalada e utilizada de forma intuitiva e eficiente.

Se você está buscando uma maneira de melhorar o desempenho e o engajamento do seu site, considere transformar seu site em um PWA. Com as ferramentas e frameworks disponíveis atualmente, criar um PWA é mais fácil do que nunca.

Para criar PWAs mais complexos e personalizados, é recomendado aprofundar seus conhecimentos em nossos artigos completos em HTMLCSSJavaScript e as tecnologias relacionadas a PWAs.

E para você validar seus códigos, para que o back-end do seu PWA funcione sem problemas, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem com potência de verdade!!!

Author: Thiago Rossi

Deixe um comentário

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