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:

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ó vão estar 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 você atualize o manifesto no servidor e o algoritmo de atualização seja acionado.

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.

Cuidado : o Chrome e o Edge para computador renderizam os 10 primeiros itens, enquanto o Chrome para Android só renderiza os três primeiros atalhos da lista do manifesto. Por isso, é melhor ordená-los por prioridade. O Chrome no Android também adiciona acesso a "Informações do app" e em "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, vai 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 é compatível com atalhos de apps para Android e ChromeOS e com o PWA Builder para Android, ChromeOS, iOS e iPadOS.

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.

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

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

Aviso : se quiser fornecer todas as opções possíveis que combinam definições de tela, orientações e modo multitarefa, você terá mais de 25 imagens diferentes para criar 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 vai aparecer na animação de abertura e enquanto o PWA estiver carregando

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.

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.

Aviso : a cor do tema é ignorada nesse modo, e a barra de notificações é renderizada sobre um plano de fundo transparente. Além disso, o pixel [0, 0] do app agora é o pixel [0, 0] da tela física, e não após a á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 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.

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.

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

Recursos

• Gerador de recursos de PWA
• Realizar tarefas rapidamente com atalhos de apps
• Biblioteca PWA Compat
• Definir atalhos de apps