- Progressive Web Apps (PWAs) são uma ferramenta poderosa para fazer aplicações web parecerem apps nativos, permitindo otimizar a experiência do usuário por meio de vários modos de exibição
- O modo de exibição definido no arquivo de manifesto da PWA ajusta a visibilidade da UI do navegador, e adaptar a interface a cada modo ajuda a reduzir a diferença entre a experiência web e a de app
- Com media queries em CSS e JavaScript, é possível ajustar conteúdo e funcionalidades conforme o modo de exibição, oferecendo uma experiência personalizada que atende às necessidades do usuário
- Usuários de PWA e visitantes de sites comuns têm expectativas diferentes, por isso é preciso otimizar navegação, prompt de instalação e conteúdo de acordo com o modo de exibição
- A otimização por modo de exibição faz a PWA parecer mais refinada e mais próxima de um app, sendo uma técnica importante para melhorar a experiência de app na web
Modos de exibição de PWA e por que a otimização é necessária
- PWA é uma tecnologia que permite implementar aplicações web como se fossem apps nativos; ao sair do ambiente tradicional do navegador, podem surgir problemas de usabilidade
- Pode-se perder recursos oferecidos pelo navegador, como voltar, recarregar e copiar URL
- Elementos adequados para um site podem parecer pouco naturais em um ambiente de app
- Os modos de exibição que podem ser definidos no arquivo
manifest são os seguintes
fullscreen: oculta toda a UI do navegador e usa a tela inteirastandalone: oculta os controles do navegador e se parece com um app nativominimal-ui: mostra o mínimo de elementos de UI do navegadorbrowser: fornece a interface padrão do navegador
- Quando a UI do navegador é ocultada, isso pode afetar a experiência do usuário, então a otimização por modo de exibição é essencial
Uso de media queries de modo de exibição
- É possível usar media queries para ajustar estilos e funcionalidades conforme o modo de exibição
- Exemplo:
@media (display-mode: standalone) se aplica apenas no modo standalone
- Há suporte a queries correspondentes aos modos
fullscreen, minimal-ui e browser
- Os modos experimentais
window-controls-overlay e tabbed podem ser definidos em ordem personalizada por meio de display_override
window-controls-overlay: exibe botões de controle da janela como sobreposição no desktoptabbed: oferece suporte a vários ambientes de aplicação em uma única janela
- Também é possível verificar o modo de exibição e fazer ajustes dinâmicos com JavaScript
- Exemplo: verificar o modo atual com
window.matchMedia("(display-mode: standalone)").matches
- Detectar eventos de mudança de modo para ajustar a UI dinamicamente
Casos práticos de aplicação
- Conteúdo personalizado para usuários de PWA: como quem instalou a PWA já é um usuário convertido, vale reduzir conteúdo de marketing e focar na experiência do usuário
- Elementos desnecessários, como prompts de instalação, podem ser ocultados
- Oferta de opções adicionais: quando não há UI do navegador, são necessárias alternativas dentro do app, como ajuste de tamanho da fonte, alternância entre modo claro/escuro e compartilhamento
- Funcionalidades adequadas à plataforma: a barra de navegação inferior, comum em apps nativos mobile, combina com PWAs, mas soa pouco natural em sites
- Recursos como botão de impressão devem ser ocultados no modo PWA
- Gerenciamento de prompts de instalação: controlar com media queries ou JavaScript para que o prompt de instalação não apareça em uma PWA já instalada
- Exemplo: ocultar elementos no modo PWA com a classe utilitária
.hide-in-pwa
- Estratégia de escopo e URL inicial: usar
scope e start_url para diferenciar conteúdo entre o ambiente PWA e o ambiente web
scope: define o caminho de nível superior da PWA; ao sair dele, a UI do navegador é exibidastart_url: define a página mostrada ao iniciar o app, por exemplo, indo direto para um dashboard
- Reforço de transições de view: aplicar efeitos de transição de view, comuns em apps nativos, apenas para a experiência PWA
- Exemplo: definir CSS de transição de view dentro de
@media (display-mode: standalone)
Suporte de navegadores e testes
- As media queries de modo de exibição contam com amplo suporte na maioria dos navegadores
- O Firefox não oferece suporte a PWA, e o Firefox no Android mostra apenas o modo
browser
- Com progressive enhancement, é possível garantir degradação elegante em navegadores sem suporte
- Os testes devem ser feitos em vários ambientes, pois o comportamento varia conforme dispositivo e navegador
- Como os navegadores não oferecem simulação de modo de exibição, é necessário testar em combinações reais de dispositivo e sistema operacional
Resumo e implicações
- Com a media query
display-mode, é possível oferecer uma experiência adaptativa à PWA conforme o contexto de instalação e exibição
- Dá para ocultar prompts de instalação, dar suporte à navegação, personalizar conteúdo, reforçar a sensação nativa e melhorar progressivamente
- Usuários de PWA têm necessidades e expectativas diferentes das de visitantes comuns da web, então ajustes cuidadosos por modo de exibição são necessários
- À medida que as PWAs amadurecem, implementação cuidadosa e otimização detalhada tornam-se a chave para criar uma experiência de app atraente
- Para mais informações, recomenda-se consultar “Extensive Guide To Progressive Web Applications” da Smashing Magazine
2 comentários
O Firefox também voltou a oferecer suporte a PWA no Nightly. Em breve isso também será adicionado à versão stable.
Como precisa ser usado por meio do navegador... eu sempre prefiro o nativo, mas quando vejo discussões sobre PWA, sempre acho interessante.
Buscam a mesma otimização, mas em direções diferentes...