Há muitas melhorias que podem melhorar a conversão e o uso do seu PWA.
Atalhos de apps
Os atalhos de apps são uma lista estática de links diretos para seu PWA. Eles são escritos no manifesto. Especificação do manifesto do app da Web. Com ela, é possível definir uma lista de atalhos para diferentes partes ou recursos do PWA e acelerar 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 o WebAPK e aparecem em um menu contextual no ícone do app na tela inicial, na base ou na barra de tarefas, como nesta imagem:
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 o PWA precisa carregar quando o usuário o iniciar usando esse atalho. Ele precisa ser um URL no escopo do PWA e ter um link direto para o recurso descrito por
name
oushort_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 do atalho
icons
- (Opcional) Uma matriz de objetos de ícone com
src
,type
,sizes
e campospurpose
opcionais, descrevendo quais imagens precisam representar o atalho.
Trate os atalhos de apps como uma capacidade de melhor esforço. Isso significa que você não pode confiar que esses atalhos sejam exibidos 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 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 apps que você pode usar ao instalar o app no Android com o Chrome ou em um computador com o Edge ou o Chrome.
iOS e iPadOS
Na publicação de PWAs, há algumas melhorias que podem melhorar a experiência dos usuários no Safari no iOS/iPadOS.
Telas de apresentação
Conforme visto no capítulo "Web App Manifest", 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, é necessário definir 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
, desta forma:
<link rel="apple-touch-startup-image" href="ios-startup.png">
O desafio é que a imagem de inicialização deve ter o tamanho exato da janela que seu PWA terá na abertura. Portanto, dispositivos iOS e iPadOS diferentes precisam de imagens diferentes. Mais situações precisam ser cobertas no iPad, como aberturas em modo paisagem/retrato e renderização do PWA no modo multitarefa (como 1/3, 1/2 ou 2/3 da tela).
Você pode verificar uma lista atualizada de tamanhos de tela do iOS e do 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 para imagens de inicialização do iOS
Definir imagens de inicialização é difícil, então 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 em PNG e fornece o código HTML com elementos
<link>
para injetar no documento. O Gerador de recursos do PWA é um exemplo dessa 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 do
<link>
com base no tipo e tamanho da tela do dispositivo atual. É possível usar uma tela na memória, renderizar a imagem e convertê-la em um URIdata:
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 Progressive Enhancement e a detecção de recursos no PWA, pode haver alguns casos extremos em que é preciso saber se o usuário está em um PWA em plataformas para dispositivos móveis da Apple, por exemplo, quando você quer oferecer instruções de instalação ou adicionar links para apps específicos da plataforma que são exclusivos do 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
forundefined
, significa que o usuário não está em um dispositivo iPadOS ou iOS. - Se
navigator.standalone
forfalse
, significa que o usuário abriu o PWA no navegador e o está usando. - Se
navigator.standalone
fortrue
, significa que o usuário abriu o PWA na tela inicial e está tendo a experiência independente.
Suporte a tela cheia
No Safari no iOS e em iPads, somente 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 com que o PWA entre no modo de tela cheia.
Na imagem a seguir, você pode conferir à esquerda um design autônomo padrão com uma cor de tema e, à direita, um PWA com modo iOS de tela cheia que permite renderizar conteúdo atrás da barra de status.
Se você adicionar a tag a seguir ao HTML, seu PWA no iOS e no iPadOS vai 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 são exibidos o relógio, o nível da 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 seu design, porque o sistema operacional sempre renderizará os ícones em branco, portanto, você deve sempre contrastar os planos de fundo na 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, conforme o Capítulo "Design do app".
Confiabilidade na instalação
O Safari no iOS e iPadOS anteriores à versão 15.4 só carrega o arquivo de manifesto 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. 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. O Safari o ignora.
Quando o Safari não consegue carregar o manifesto a tempo, pressionar "Adicionar à tela inicial" coloca um ícone na tela inicial, mas não oferece uma experiência de aplicativo; será meramente um atalho para uma guia do Safari.