Melhorias

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

Atalhos de apps

Os atalhos de apps são uma lista estática de links diretos para o PWA, que são gravados no manifesto. Especificação do manifesto de apps da Web. Com ele, você pode definir uma lista de atalhos para diferentes partes ou recursos do seu PWA e acelerar a navegação para seções acessadas com frequência.

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

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 usa 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 a PWA precisa carregar quando o usuário a inicia usando esse atalho. Ele precisa ser um URL dentro do escopo da PWA e ter um link direto para o recurso descrito pelo name ou short_name.
short_name
(opcional) Um nome mais curto usado quando não há espaço suficiente para mostrar o valor completo do campo name.
description
(Opcional) Uma descrição do que esse atalho vai fazer
icons
(opcional) Uma matriz de objetos de ícone com campos src, type, sizes e purpose opcionais, que descrevem quais imagens devem representar o atalho

Os atalhos de apps devem ser tratados como uma capacidade de esforço máximo. Isso significa que não é possível confiar que esses atalhos vão aparecer de forma consistente. Mesmo que apareçam, não é possível saber quantos atalhos vão aparecer ou se a plataforma vai ignorar os ícones, já que isso depende da escolha dos navegadores. Uma discussão completa por plataforma está fora do escopo, mas abaixo você tem uma ideia de como isso funciona no Android e no computador. A melhor maneira de lidar com essa incerteza é ordenar os itens por prioridade.

O exemplo de código a seguir define diferentes atalhos de app 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á alguns aprimoramentos que podem melhorar a experiência dos usuários no Safari no 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 vai ter na abertura. Portanto, diferentes dispositivos iOS e iPadOS vão precisar de imagens diferentes. Mais situações precisam ser abordadas no iPad, como aberturas em modo paisagem/retrato e renderização da PWA no modo multitarefa (como 1/3, 1/2 ou 2/3 da tela).

Confira uma lista atualizada dos tamanhos de tela do iOS e do iPadOS nas diretrizes de interface humana da Apple.

É possível definir diferentes versões da imagem de inicialização com uma consulta de mídia dentro do 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 para imagens de inicialização do iOS

Definir imagens de startups é difícil, 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 PWA Asset Generator (link em inglês) é um exemplo de ferramenta desse tipo.
  • 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ê precise 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 são exclusivos para iOS.

Para evitar a leitura da string do user agent, verifique a propriedade standalone do objeto navigator. Essa é uma propriedade não padrão e só está disponível no mecanismo WebKit no iOS e 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 está usando-o.
  • Se navigator.standalone for true, significa que o usuário abriu o PWA na tela inicial e está tendo a experiência independente do PWA.

Suporte a tela cheia

No Safari para iOS e iPads, apenas o display: standalone é compatível como modo de exibição do seu PWA.

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 tag a seguir ao HTML, o PWA no iOS e iPadOS vai entrar no modo de tela cheia, mas ele é 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) ainda fica visível, mas é renderizada sobre o conteúdo com um plano de fundo transparente.

Ao usar esse modo, tenha cuidado com o design, porque o sistema operacional sempre renderizará os ícones em branco. Portanto, sempre contraste os planos de fundo da parte de cima da tela com conteúdo claro. Além disso, é importante usar variáveis de ambiente do CSS para renderizar conteúdo na área segura, conforme visto no capítulo de design de apps.

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

Confiabilidade da instalação

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

Quando o navegador não consegue carregar o manifesto a tempo, pressionar "Adicionar à tela inicial" coloca um ícone na tela inicial, mas não fornece uma experiência no aplicativo. Isso é apenas um atalho para uma guia do navegador.

Recursos