PWA App Design: Os Progressive Web Apps (PWAs) revolucionaram a forma como interagimos com a web, oferecendo uma experiência similar à de aplicativos nativos. Ao combinar o melhor dos dois mundos, os PWAs proporcionam carregamentos mais rápidos, funcionamento offline e uma interface mais intuitiva.
Neste artigo, exploraremos os principais aspectos do design de PWAs, desde a configuração da janela e do ícone até a otimização para diferentes dispositivos, com exemplos de código HTML, CSS e JavaScript para ilustrar os conceitos.
A Janela: O Portão de Entrada do Seu PWA
A janela é o primeiro elemento que o usuário vê ao abrir seu PWA. É crucial configurá-la de forma a transmitir a identidade da sua marca e proporcionar uma experiência agradável.
Exemplo de código HTML para configurar a janela:
HTML
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="/manifest.json">
<title>Meu PWA</title>
</head>O elemento <meta name="viewport"> define a largura e a escala inicial da página, garantindo que o conteúdo se adapte corretamente a diferentes tamanhos de tela. O elemento <link rel="manifest"> aponta para o arquivo manifest.json, que contém as informações sobre o PWA.
O Ícone: A Face do Seu PWA
O ícone do seu PWA é a representação visual do seu aplicativo na tela inicial do dispositivo. Um bom ícone deve ser memorável, relevante e compatível com as diretrizes de design das plataformas.
Exemplo de código HTML para adicionar o ícone:
HTML
<link rel="icon" href="/icon.png">O elemento <link rel="icon"> especifica o caminho para o arquivo de imagem do ícone.
Como Aplicar Temas no Seu App
A personalização do tema do seu PWA permite que os usuários escolham a aparência que mais lhes agrada. Você pode oferecer diferentes opções de cores, fontes e layouts.
Exemplo de código CSS para criar um tema:
CSS
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-family: 'Roboto', sans-serif;
}
body {
background-color: var(--primary-color);
color: var(--secondary-color);
font-family: var(--font-family);
}Utilizando variáveis CSS, você pode centralizar as cores e fontes do seu aplicativo, facilitando a personalização.
Modos de Exibição
Os modos de exibição controlam como o seu PWA se comporta em diferentes contextos. Você pode escolher entre os seguintes modos:
- Fullscreen: Ocupa toda a tela do dispositivo.
- Standalone: O PWA é aberto em uma janela separada, como um aplicativo nativo.
- Browser: O PWA é aberto dentro do navegador.
Exemplo de código JavaScript para solicitar o modo fullscreen:
JavaScript
document.documentElement.requestFullscreen();Otimizando para PC
PWA App Design: Para otimizar seu PWA para PC, você pode implementar atalhos de teclado, suporte a mouse e permitir que a janela seja redimensionada.
Exemplo de código JavaScript para detectar o sistema operacional:
JavaScript
if (navigator.userAgent.indexOf("Windows") != -1) {
// Adicionar funcionalidades específicas para Windows
}Consultas de Mídia CSS
A primeira consulta de mídia que você pode aproveitar no PWA é a propriedade display-mode que aceita os valores browser, standalone, minimal-ui ou fullscreen.
Essa consulta de mídia aplica estilos diferentes a cada modo. Por exemplo, é possível renderizar um convite para instalação do app somente quando estiver no modo de navegador ou renderizar uma determinada informação somente quando o usuário usar o app no ícone do sistema. Isso pode incluir a adição de um botão “Voltar” para ser usado quando o app for iniciado no modo independente.
Exemplo de código CSS :
CSS
/* Apenas quando app usado em navegadores */
@media (display-mode: browser) {
}
/* Quando app acessado através do ícone em modo standalone */
@media (display-mode: standalone) {
}
/* Quando app acessado atraǘes do ícone em todos os modos de exibição */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}Cor de Destaque e Fonte do App
A cor de destaque e a fonte do seu aplicativo são elementos importantes para a identidade visual do seu PWA.
Exemplo de código CSS para definir a cor de destaque e a fonte:
CSS
.button {
background-color: var(--primary-color);
color: white;
font-family: var(--font-family);
}Remover Puxe para Baixo para Atualizar
Navegadores móveis modernos, como Google Chrome e Safari, têm um recurso que atualiza a página quando ela é desativada. Em alguns navegadores, como o Chrome no Android, esse comportamento também é ativado em PWAs independentes.
É recomendável desativar essa ação. Por exemplo, ao fornecer seu próprio gerenciamento de gestos ou ação de atualização, ou se houver a possibilidade de o usuário acionar a ação involuntariamente.
É possível desabilitar esse comportamento padrão através de código Javascript ou atráves de código CSS.
Exemplo de código JavaScript:
JavaScript
document.body.addEventListener('touchmove', (event) => {
event.preventDefault();
});Exemplo de código CSS:
CSS
body {
overscroll-behavior-y: contain;
}Áreas Seguras Viewport
As áreas seguras da viewport garantem que o conteúdo do seu aplicativo não seja coberto por elementos do sistema operacional.
Se você quiser ter acesso total à tela, mesmo à área invisível, para renderizar a cor ou a imagem, inclua viewport-fit=cover no conteúdo da tag <meta name="viewport">.
Exemplo de código HTML para definir as áreas seguras:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">Conclusão
PWA App Design: Este artigo visa fornecer uma visão geral do design de PWAs e os exemplos de código são simplificados para fins didáticos. Para criar PWAs mais complexos e personalizados, é recomendado aprofundar seus conhecimentos em nossos artigos completos em HTML, CSS, JavaScript e as tecnologias relacionadas a PWAs.
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.
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!!!
