Design de app

Este capítulo se concentra em alguns aspectos críticos da renderização de conteúdo fora da guia do navegador.

A janela

Diferentes sistemas operacionais têm ideias diferentes sobre o que é uma janela de aplicativos. Por exemplo, em iPhones, um aplicativo sempre ocupa 100% da tela. No Android e no iPad, os apps geralmente são executados em tela cheia, mas é possível compartilhar a tela entre dois apps. No entanto, há apenas uma instância aberta por vez. Por outro lado, em um dispositivo desktop, um aplicativo pode ter mais de uma instância aberta ao mesmo tempo. Ele compartilha o espaço disponível na tela com todos os outros aplicativos abertos. Cada instância de aplicativo pode ser redimensionada e posicionada em qualquer lugar da tela, até mesmo sobreposta a outros aplicativos.

O ícone

Reconhecemos os apps pelo ícone. Esse ícone aparece quando você pesquisa aplicativos, nas configurações, onde inicia aplicativos e onde vê os aplicativos em execução.

Confira a lista abaixo:

• Tela inicial (iOS, iPadOS, Android).
• Acesso rápido aos apps (macOS, Android).
• Menu "Iniciar" ou "Menu do app" (Windows, ChromeOS, Linux).
• Painéis de dock, barra de tarefas ou multitarefa (todos os sistemas operacionais).

Ao criar o ícone para seu App Web Progressivo, verifique se ele é independente de plataforma, já que cada sistema operacional pode renderizar ícones e aplicar diferentes máscaras de forma a eles, como as mostradas na imagem abaixo.

Como definir temas no seu app

Existem várias maneiras de personalizar o estilo do app nos seus PWAs, incluindo:

• Cor do tema: define a cor da barra de título da janela na área de trabalho e a cor da barra de status em dispositivos móveis. Com uma metatag, é possível ter opções para esquemas diferentes, como modo escuro ou claro, e eles serão usados com base na preferência do usuário.
• Background color: define a cor da janela antes do carregamento do aplicativo e de seu CSS.
• Cor de destaque: define a cor dos componentes integrados do navegador, como controles de formulário.

Um PWA para computador mostrando as cores de tema e destaque, e uma tela de apresentação do PWA do Android mostrando cores de tema e plano de fundo.

Observação : ao planejar a interface do usuário do Progressive Web App, não use imagens ou gradientes no tema, apenas cores simples. É melhor escolher cores sem transparência e usar as cores rgb ou hsl, códigos hexadecimais ou cores nomeadas. A aplicação de temas também pode afetar os temas do navegador, mesmo sem instalar o app, como ao usar o elemento <meta name="theme-color">.

Modos de exibição

É possível definir o tipo de experiência de janela do Progressive Web App. Há três opções disponíveis:

• Tela cheia
• Independente
• Interface de usuário mínima

Observação : se um modo de exibição específico não for compatível ou não puder ser usado para mostrar seu PWA, ele vai voltar ao próximo modo de exibição disponível. A tela cheia voltará para a versão autônoma, a versão autônoma voltará para a interface de usuário mínima e a interface de usuário mínima voltará para o navegador, que é o padrão. O modo de exibição do navegador não aparece como uma janela própria, mas mostra o PWA em uma guia no navegador em que foi instalado, como um favorito da Web em uma tela inicial.

Experiência em tela cheia

A experiência em tela cheia é adequada para experiências imersivas, como jogos, RV ou RA. No momento, ele está disponível apenas em dispositivos Android e oculta a barra de status e de navegação, garantindo ao PWA 100% da tela do seu conteúdo.

No computador e no iPadOS, não há suporte para PWAs em tela cheia. No entanto, você pode usar a API Fullscreen no PWA para mostrar o app em tela cheia quando solicitado pelo usuário.

Experiência independente

A opção mais comum para um App Web Progressivo, o modo independente exibe seu PWA em uma janela padrão do SO sem qualquer interface de navegação do navegador. A janela também pode incluir um menu controlado pelo navegador em que o usuário pode:

• Copie o URL atual.
• Ver, aplicar ou desativar extensões do navegador.
• Ver e alterar permissões.
• Verifique a origem atual e o certificado SSL.

A barra de título também pode mostrar permissões e uso de hardware substituindo a omnibox ou a barra de URL quando o PWA for renderizado na guia.

As imagens acima mostram como um PWA é exibido no modo independente em computadores no Microsoft Edge e no Chrome.

Em dispositivos móveis, uma experiência independente com PWA cria uma tela padrão que mantém a barra de status visível. Assim, o usuário ainda pode conferir as notificações, o horário e o nível da bateria. Geralmente, não tem um menu controlado pelo navegador, como as experiências independentes em computadores.

Alguns navegadores no Android criam uma notificação fixa e silenciosa enquanto o PWA está em primeiro plano. Isso permite que o usuário copie o URL atual ou outras opções.

Interface do usuário mínima

Esse modo está disponível para Progressive Web Apps nos sistemas operacionais Android e de computador. Quando você o usa, o navegador que renderiza seu PWA mostra uma interface de usuário mínima para ajudar o usuário a navegar no aplicativo.

No Android, você terá uma barra de título que renderiza o elemento <title> atual e a origem com um pequeno menu suspenso disponível. No computador, há um conjunto de botões na barra de título para ajudar na navegação, incluindo um botão "Voltar" e um controle que alterna entre uma ação de parar e atualizar, com base no status de carregamento atual.

Aviso : o Safari no iOS e iPadOS não é compatível com o modo de interface reduzida para PWAs. Em vez disso, um atalho do navegador é usado como substituto. O usuário pode adicionar um ícone à tela inicial, mas esse ícone apontará para o Safari como um favorito e ele não terá uma experiência do aplicativo fora da guia do navegador.

Como otimizar o design para computador

Ao projetar um App Web Progressivo para funcionar em um computador, é preciso pensar nas infinitas possibilidades de tamanho da janela em comparação com estar na guia do navegador ou como um app em um sistema operacional para dispositivos móveis.

No capítulo 3 mencionamos o minimodo: um app para computador pode ter apenas 200 por 100 pixels. Essa janela vai usar o conteúdo do elemento <title> no HTML como o título da janela. Esse conteúdo também é renderizado quando você usa a tecla Alt para alternar entre apps e em outros lugares.

Preste atenção ao elemento <title> do HTML e repense como você o usa. O <title> não é apenas para SEO ou para renderizar apenas os primeiros caracteres de uma guia do navegador. Ele faz parte da experiência do usuário na janela independente da área de trabalho.

Observação : se você estiver desenvolvendo seu app usando uma biblioteca do lado do cliente, como React ou Vue, não se esqueça de mudar o <title> para algum valor prático ao alternar entre seções ou rotas do app. É hora de reimaginar o <title>.

Práticas recomendadas para CSS

Toda sua experiência com layout, design e animação de CSS é válida quando o conteúdo é renderizado na experiência independente. No entanto, existem algumas dicas e truques para melhorar a experiência em uma janela independente.

Lembre-se de que o CSS define apenas estilos para o conteúdo do PWA. Mais adiante neste curso, veremos como especificar declarações de estilo para a janela ao redor do conteúdo, como propriedades no manifesto do app da Web.

Consultas de mídia

A primeira consulta de mídia a ser aproveitada no PWA é a propriedade display-mode, que aceita os valores browser, standalone, minimal-ui ou fullscreen.

Esta consulta de mídia aplica estilos diferentes a cada modo. Por exemplo, você pode renderizar um convite de instalação somente quando estiver no modo de navegador ou renderizar uma informação específica somente quando o usuário usar seu app pelo ícone do sistema. Isso pode incluir a adição de um botão "Voltar" para usar quando o app for iniciado no modo independente.

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}

Observação : os usuários esperam que os apps sejam integrados à plataforma. Por isso, considere oferecer os modos claro e escuro usando prefers-colors-scheme e respeitar prefers-reduced-motion consultas de mídia para desativar ou reduzir transições e animações.

A experiência do app

Quando os usuários usam um PWA instalado, eles esperam o comportamento do app. Embora não seja simples definir o que isso significa, o comportamento padrão da Web não oferece a melhor experiência em algumas situações.

Seleção de usuário

Em geral, o conteúdo pode ser selecionado com um mouse ou ponteiro ou com o gesto de tocar e pressionar. Embora sejam úteis para o conteúdo, eles não oferecem a melhor experiência para itens de navegação, menus e botões no PWA.

Portanto, é recomendável desativar a seleção de usuários nesses elementos usando user-select: none e a versão do prefixo -webkit-:

.unselectable {
   user-select: none;
}

A seleção de usuários é um recurso essencial em qualquer app da Web em termos de usabilidade e acessibilidade. Não desative a seleção do usuário em todo o conteúdo, apenas em elementos da interface quando isso criar uma experiência ruim ou inesperada.

Cor de destaque

No PWA, você pode definir uma cor que corresponda à sua marca nos controles de formulário HTML usando a propriedade accent-color.

Fontes do sistema

Se você quiser que um elemento, como caixas de diálogo ou mensagens, corresponda à fonte padrão da plataforma do usuário, use a seguinte família de fontes:

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

Puxe para baixo para atualizar

Os navegadores modernos para dispositivos móveis, como o Google Chrome e o Safari, têm um recurso que atualiza a página quando ela é suspensa. 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 de forma não intencional.

É possível desativar esse comportamento usando overscroll-behavior-y: contain:

  body {
    overscroll-behavior-y: contain;
  }

Áreas seguras

Alguns dispositivos não têm telas retangulares desobstruídas. Em vez disso, a tela pode ter uma forma diferente, como um círculo, ou ter partes da tela que não podem ser usadas, como o entalhe do iPhone 13. Nesses casos, alguns navegadores vão expor variáveis de ambiente com áreas seguras que podem mostrar conteúdo.

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">. Em seguida, use as variáveis de ambiente safe-area-inset-* para estender seu conteúdo com segurança para essas áreas.

Cuidado : ao aplicar viewport-fit=cover, lembre-se de que agora você pode renderizar pixels por trás de cantos e entalhes arredondados. Portanto, use sempre margens ou paddings seguros para o conteúdo essencial e os elementos interativos.

Recursos

• Consulta de mídia CSS no modo de exibição
• Controle a rolagem: personalização de efeitos de arrastar para atualizar e estouro
• prefers-color-scheme: Olá, escuridão, velho amigo
• prefers-reduced-motion: às vezes, menos movimento é mais
• Função CSS env()
• Cor de destaque CSS