PWACompat: o manifesto do app da Web para todos os navegadores

Você projetou um app da Web, escreveu o código e o service worker e, por fim, adicionou o Manifesto do app da Web para descrever como ele deve se comportar quando instalado no dispositivo de um usuário. Isso inclui itens como ícones de alta resolução para usar, por exemplo, a tela de início ou seletor de apps de um smartphone, ou como seu app da Web precisa ser iniciado quando aberto na tela inicial do usuário.

Muitos navegadores respeitam o manifesto do app da Web, mas nem todos vão carregar ou respeitar todos os valores que você especificar. Insira a PWACompat, uma biblioteca que usa o manifesto do seu app da Web e insere automaticamente tags meta ou link relevantes para ícones de diferentes tamanhos, o favicon, o modo de inicialização, as cores etc.

O PWACompat usa um manifesto de app da Web e adiciona tags meta, de link etc. padrão e não padrão.
PWACompat usa um manifesto de app da Web e adiciona tags meta, link etc. padrão e não padrão.

Isso significa que não é mais necessário adicionar tags inúmeras, padrão e não padrão (como <link rel="icon" ... /> ou <meta name="orientation" ... />) às suas páginas. E, para aplicativos de tela inicial do iOS, o PWACompat cria telas de apresentação dinamicamente. Assim, você não precisa gerar uma para cada tamanho de tela diferente.

Tela de apresentação do iOS para Emojityper, gerada por PWACompat

Usar a PWACompat

Para usar PWACompat, vincule ao manifesto do app da Web em todas as suas páginas:

<link rel="manifest" href="manifest.webmanifest" />

Em seguida, inclua este script ou adicione-o a um pacote assíncrono carregado:

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

A PWACompat buscará o arquivo de manifesto e fará o trabalho necessário para o navegador do usuário, independentemente de ele estar em um dispositivo móvel ou computador.

Ainda recomendamos adicionar pelo menos um ícone de atalho de alta qualidade para a indexação de pesquisa:

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

Para mais informações, consulte as práticas recomendadas.

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

Detalhes

Para navegadores compatíveis, o que a PWACompat realmente faz? A PWACompat carregará o manifesto do seu app da Web e:

  • Criar tags de ícones meta para todos os ícones no manifesto (por exemplo, para um favicon, navegadores mais antigos)
  • Crie metatags substitutas para vários navegadores (por exemplo, bifurcações do iOS, WebKit/Chromium etc.) descrevendo como um app da Web deve ser aberto.
  • Define a cor do tema com base no manifesto.

Para o Safari, o PWACompat também:

  • Define apple-mobile-web-app-capable (abertura sem o Chrome do navegador) para modos de exibição standalone, fullscreen ou minimal-ui
  • Cria imagens apple-touch-icon, adicionando o plano de fundo do manifesto a ícones transparentes. Caso contrário, o iOS renderiza a transparência como preto.
  • Cria imagens de apresentação dinâmicas, que correspondem às imagens de apresentação geradas para navegadores baseados no Chromium.

Se quiser contribuir ou ajudar com mais compatibilidade com navegadores, o PWACompat está no GitHub (em inglês).

Testar

A PWACompat está disponível no Airhorner, v8.dev e Emojityper. O HTML do cabeçalho do seu site pode ser simples: basta especificar o manifesto e deixar que a PWACompat cuida do resto.

📢🤣🎉