Melhorias

Há muitas melhorias que podem melhorar a conversão e o uso do PWA.

Atalhos de apps

Os atalhos de apps são uma lista estática de links diretos para o PWA e são escritos no manifesto. Especificações do manifesto do app da Web. Ele permite que você defina uma lista de atalhos para diferentes partes ou recursos no seu PWA. Eles aceleram a navegação para seções acessadas com frequência.

Os atalhos de apps estão disponíveis na maioria dos sistemas operacionais de computador e no Android com WebAPK. Eles aparecem em um menu contextual no ícone do app na tela inicial, na base ou na barra de tarefas, como na imagem abaixo:

Atalhos de apps no Android e no macOS.

Para acessar esse menu, os usuários precisam clicar com o botão direito do mouse ou tocar e manter pressionado o ícone do PWA.

.

Os atalhos são definidos no membro shortcuts do manifesto. Ele utiliza uma matriz de membros com as seguintes propriedades:

name
O texto que será mostrado ao usuário, normalmente em um menu de contexto.
url
O URL que o PWA precisa ser carregado quando o usuário o inicia usando esse atalho. Ela precisa ser um URL no escopo do PWA e ter um link direto para o recurso descrito por name ou short_name.
short_name
(Opcional) Um nome mais curto usado quando não há espaço suficiente para mostrar o valor total do campo name.
description
(Opcional) Uma descrição da função desse atalho
icons
(Opcional) Uma matriz de objetos de ícone com src, type, sizes e campos purpose opcionais, descrevendo quais imagens devem representar o atalho

Trate os atalhos de apps como uma habilidade de melhor esforço. Isso significa que não é possível confiar que esses atalhos apareçam de forma consistente e, mesmo que apareçam, você não sabe quantos atalhos aparecerão ou se a plataforma ignorará os ícones, pois fica a critério dos navegadores. Uma discussão completa por plataforma está fora do escopo, mas abaixo você tem uma ideia de como ela funciona no Android e em computadores. A melhor maneira de lidar com essa incerteza é ordenar os itens por prioridade.

.

O exemplo de código a seguir define diferentes atalhos de apps que você pode testar se instalar o app no Android com o Chrome ou no computador com o Edge ou o Chrome.

iOS e iPadOS

Ao publicar PWAs, há algumas melhorias que podem melhorar a experiência dos usuários no Safari para iOS/iPadOS.

Telas de apresentação

Como vimos no capítulo "Manifesto de app da Web", o Android cria telas de apresentação automaticamente com base nos valores do manifesto. Esse não é o caso do iOS e do iPadOS. Nesses dispositivos, defina as telas de apresentação no HTML como imagens estáticas usando elementos <link>.

Essas imagens são conhecidas como imagens de inicialização em dispositivos Apple e usam a propriedade rel com o valor apple-touch-startup-image, como em:

<link rel="apple-touch-startup-image" href="ios-startup.png">

O desafio é que a imagem de inicialização precisa ter o tamanho exato da janela que o PWA terá ao abrir. Portanto, dispositivos iOS e iPadOS diferentes vão precisar de imagens diferentes. Mais situações precisam ser abordadas no iPad, como aberturas em paisagem/retrato e renderização do PWA no modo multitarefa (como 1/3, 1/2 ou 2/3 da tela).

Consulte a lista atualizada de tamanhos de tela para iOS e iPadOS nas Diretrizes para interface humana da Apple.

Versões diferentes da imagem de inicialização podem ser definidas com uma consulta de mídia no atributo media:

<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">

Padrões de design de imagens de inicialização do iOS

Definir imagens de startups é trabalho duro, por isso temos algumas ferramentas para geração e configuração automatizadas:

  • A geração estática se integra ao sistema de build, cria todas as imagens estáticas PNG e fornece o código HTML com elementos <link> para injetar no documento. O Gerador de recursos PWA é um exemplo desse tipo de ferramenta.
  • Gerador do lado do cliente, uma ferramenta JavaScript que pode incorporar uma ou mais versões base64 da imagem de inicialização em elementos injetados <link> com base no tipo e no tamanho da tela do dispositivo atual. É possível usar uma tela na memória, renderizar a imagem e convertê-la em um URI data: com um arquivo PNG. A Biblioteca PWA Compat é uma biblioteca fácil de usar do lado do cliente que faz isso clonando a tela de inicialização típica do Android.

Como detectar um PWA em plataformas móveis da Apple

Embora você deva usar o Aprimoramento progressivo e a detecção de recursos no PWA, pode haver alguns casos extremos em que precisamos saber se o usuário está em um PWA em plataformas móveis da Apple, como quando você quer oferecer instruções de instalação ou adicionar links para apps específicos da plataforma que sejam exclusivos para iOS.

Para evitar a leitura da string do user agent, verifique a propriedade standalone do objeto navigator. Essa propriedade não é padrão e só está disponível no mecanismo WebKit no iOS e no iPadOS.

  • Se navigator.standalone for undefined, significa que o usuário não está em um dispositivo iPadOS ou iOS.
  • Se navigator.standalone for false, significa que o usuário abriu o PWA no navegador e o está usando lá.
  • Se o navigator.standalone for true, isso significa que o usuário abriu o PWA na tela inicial e está acessando a experiência independente.

Compatibilidade com tela cheia

No Safari para iOS e iPads, apenas o display: standalone é compatível como modo de exibição para o ícone do PWA. Embora display: fullscreen não seja compatível com dispositivos Android, é possível usar uma metatag não padrão para fazer o PWA entrar no modo de tela cheia.

Na próxima imagem, você pode ver à esquerda um design autônomo padrão com uma cor de tema e, à direita, um PWA com modo iOS em tela cheia que permite renderizar conteúdo atrás da barra de status.

Um comportamento padrão independente (à esquerda) e uma tela do iOS em tela cheia (à direita).

Se você adicionar a seguinte tag ao HTML, seu PWA no iOS e iPadOS entrará no modo de tela cheia, mas é diferente do Android.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Nesse modo, a barra de status do dispositivo (a parte superior onde você vê o relógio, o nível de bateria e os ícones de notificação) permanece visível, mas é renderizada sobre o conteúdo com um plano de fundo transparente.

Ao usar esse modo, tenha cuidado com seu design, porque o sistema operacional sempre renderizará os ícones em branco, portanto, você deve sempre contrastar os planos de fundo da parte superior da tela com conteúdo claro. Além disso, é importante usar variáveis de ambiente CSS para renderizar conteúdo na área segura, como visto no Capítulo sobre design de apps.

Por padrão, o 0 px superior da sua janela de visualização fica abaixo da barra de status. Se você adicionar uma metatag preta translúcida, o 0px superior da sua janela de visualização corresponderá à parte superior física da tela

Confiabilidade da instalação

O Safari no iOS e no iPadOS anteriores à versão 15.4 só carrega o arquivo de manifesto da rede quando o usuário abre a planilha de compartilhamento (usando o ícone de compartilhamento no navegador), e não quando a página é carregada. Por isso, o Safari não verifica se o site é um PWA até aquele momento, o que pode levar a situações em que o manifesto não pode ser carregado ou leva muito tempo, e o Safari ignora esse comportamento.

Quando o Safari não consegue carregar o manifesto a tempo, pressione "Adicionar à tela inicial". colocar um ícone na tela inicial, mas não fornecer uma experiência no aplicativo; será apenas um atalho para uma guia do Safari.

Recursos