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

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

O ícone

Reconhecemos apps pelo ícone. Esse ícone aparece quando você pesquisa apps, nas configurações, onde quer que eles sejam iniciados e onde os apps estão em execução.

São eles:

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

Ao criar o ícone do App Web Progressivo certifique-se de que o ícone seja independente de plataforma, já que cada sistema operacional pode renderizar ícones e aplicar diferentes máscaras de forma a eles, como as da imagem abaixo.

Como aplicar temas no seu app

Há 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, você pode ter opções para diferentes esquemas, como modo escuro ou claro, e eles serão usados com base na preferência do usuário.
• Cor de fundo: define a cor da janela antes que o aplicativo e o CSS sejam carregados.
• Cor de destaque: define a cor dos componentes integrados do navegador, como os controles de formulários.

.

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

.

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

Modos de exibição

Você pode definir o tipo de experiência de janela que gostaria de ter para seu Progressive Web App. Há três opções para escolher:

• 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 exibir seu PWA, ele voltará para o próximo modo de exibição disponível. A tela cheia voltará ao modo independente, a autônoma voltará para a interface do usuário mínima e a interface do usuário mínima voltará ao 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 do navegador onde 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, oferecendo ao PWA 100% da tela do conteúdo.

No computador e no iPadOS, os PWAs em tela cheia não são compatíveis. No entanto, você pode usar a API Fullscreen no PWA para exibir o app em tela cheia mediante solicitação do usuário.

Experiência independente

A opção mais comum para um Progressive Web App, o modo autônomo exibe seu PWA em uma janela padrão do SO sem nenhuma interface de navegação do navegador. A janela também pode incluir um menu controlado pelo navegador no qual o usuário pode:

• Copie o URL atual.
• Ver, aplicar ou desativar extensões do navegador.
• Consultar 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 é renderizado na guia.

As imagens acima mostram como um PWA é exibido no modo independente na área de trabalho no Microsoft Edge e no Chrome.

Em dispositivos móveis, uma experiência de PWA independente cria uma tela padrão que mantém a barra de status visível para que o usuário ainda possa ver notificações, horário e nível de bateria. Muitas vezes, ele não tem um menu controlado pelo navegador, como experiências independentes no computador.

Alguns navegadores no Android criam uma notificação fixa e silenciosa enquanto o PWA está em primeiro plano, permitindo 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 em 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 dentro do aplicativo.

No Android, você verá uma barra de título que renderiza o elemento <title> atual e a origem com um pequeno menu suspenso disponível. No computador, você terá 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 parada e uma de atualização, com base no status de carregamento atual.

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

Como otimizar o design para computadores

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

No Capítulo 3, mencionamos o minimodo: um app para computador pode ter até 200 por 100 pixels. Esta 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 alt Tab entre apps e outros lugares.

Preste atenção ao elemento <title> do HTML e repense como você o usa. O <title> não serve apenas para SEO ou para renderizar apenas os primeiros caracteres na guia de um navegador. ele fará parte da experiência do usuário da sua janela independente do computador.

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 um valor prático ao se mover entre seções ou rotas do app. Chegou a hora de reinventar o <title>.

Práticas recomendadas de CSS

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

Lembre-se de que o CSS só define estilos para o conteúdo do PWA. Mais adiante neste curso, vamos ver 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 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 de instalação 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.

/* 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 se integrem à plataforma, então considere oferecer os modos claro e escuro usando prefers-colors-scheme e respeitar prefers-reduced-motion as consultas de mídia para desativar ou reduzir transições e animações.

A experiência no app

Quando os usuários usam um PWA instalado, 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 do usuário

Geralmente, o conteúdo pode ser selecionado com um mouse ou ponteiro ou com um gesto de tocar e pressionar. Embora útil para o conteúdo, ele não oferece a melhor experiência para itens de navegação, menus e botões no PWA.

Portanto, é recomendável desativar a seleção do usuário 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 vital em todo app da Web para usabilidade e acessibilidade. Não desative a seleção do usuário em todo o conteúdo, somente em elementos da interface se isso criar uma experiência ruim ou inesperada.

Cor de destaque

No PWA, você pode definir uma cor para corresponder à sua marca nos controles do 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

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 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 o conteúdo com segurança para essas áreas.

Cuidado : ao aplicar viewport-fit=cover, não se esqueça de que agora é possível renderizar pixels atrás de cantos arredondados e entalhes. Portanto, sempre use margens ou preenchimentos seguros para o conteúdo essencial e os elementos interativos.

Recursos

• Consulta de mídia CSS no modo de exibição
• Controle a rolagem: personalize os efeitos "puxar para atualizar" e "overflow"
• prefers-color-scheme: Olá, escuridão, meu velho amigo
• prefere-reduzir-movimento: às vezes, menos movimento é mais
• Função CSS env()
• Cor de destaque do CSS