Melhorias

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.

Observação : os atalhos de apps só estarão disponíveis se o usuário instalar o PWA.

Aviso : depois que o usuário instalar o PWA, não será possível adicionar ou remover atalhos até que o manifesto no servidor seja atualizado e o algoritmo de atualização seja acionado.

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 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 do atalho

icons

(Opcional) Uma matriz de objetos de ícone com src, type, sizes e campos purpose 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.

Atenção : o Chrome e o Edge no computador renderizam os 10 primeiros itens, enquanto o Chrome no Android renderiza apenas os três primeiros atalhos na lista do manifesto. É melhor organizá-los por prioridade. O Chrome no Android também adiciona acesso a "Informações do app" e "Configurações do site" no menu após a lista personalizada.

Observação : se você publicar seu PWA em catálogos e lojas de apps, poderá converter os atalhos no manifesto em implementações específicas da plataforma usando APIs específicas para cada sistema operacional, como Ações rápidas no iOS e atalhos no Android. O BubbleWrap oferece suporte a atalhos de apps para Android e ChromeOS e o PWA Builder para Android, ChromeOS, iOS e iPadOS.

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.

Aviso : como mencionamos nos capítulos anteriores, os PWAs no iOS e no iPadOS só podem ser instalados no Safari. Outros navegadores não podem fazer isso na tela inicial.

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">

Aviso : se você quiser oferecer todas as opções possíveis, combinando definições de tela, orientações e modo multitarefa, precisará criar mais de 25 imagens diferentes e vincular no HTML. Se você não fornecer uma imagem de inicialização para o contexto do iOS ou iPadOS do usuário, uma tela branca será exibida na animação de abertura enquanto o PWA estiver sendo carregado.

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 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 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 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.
• Se navigator.standalone for true, 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.

Aviso : nesse modo, a cor do tema é ignorada, e a barra de notificações é renderizada sobre um plano de fundo transparente. Além disso, o pixel [0, 0] do app agora é o [0, 0] pixel da tela física, e não depois da área segura.

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.

Aviso : se o Safari não conseguir carregar o manifesto, ele vai verificar se o PWA tem algumas metatags descontinuadas, como apple-mobile-web-app-capable. Você não deve usar essas metatags. Eles oferecem uma experiência de app de tela inicial sem atributos essenciais para o PWA, como respeitar os atributos start_url ou scope, tornando a experiência do app péssima.

Recursos

• Gerador de recursos do PWA
• Faça muito mais rapidamente com os atalhos de apps
• Biblioteca de compatibilidade do PWA
• Definir atalhos de apps