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 ao 'instalado' no dispositivo do usuário. Isso inclui ícones de alta resolução para usar, por exemplo, em um iniciador ou alternador de apps de smartphone ou como o app da Web será iniciado quando aberto na tela inicial do usuário.

E embora muitos navegadores respeitem o manifesto dos aplicativos da web, nem todos os navegadores carregam ou respeitam cada valor especificado. Insira PWACompat, uma biblioteca que usa o manifesto do app da Web e insere automaticamente tags meta ou link relevantes para ícones de tamanhos diferentes, o favicon, o modo de inicialização, as cores etc.

A PWACompat usa um manifesto de app da Web e adiciona tags de meta, link etc. padrão e não padrão.
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 você não precisa mais adicionar inúmeras tags 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 até cria telas de abertura dinamicamente para que você não precise gerar uma para cada tamanho de tela diferente.

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

Como usar o PWACompat

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

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

E depois inclua esse script ou adicione-o a uma pacote carregado assíncrono:

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

O PWACompat buscará o arquivo de manifesto e fará o trabalho necessário para o navegador do usuário, independentemente usando um dispositivo móvel ou um 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 com suporte, o que o PWACompat realmente faz? O PWACompat vai carregar o manifesto do app da Web e:

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

Para o Safari, a PWACompat também:

  • Define apple-mobile-web-app-capable (abertura sem um navegador Chrome) 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, parecidas com as geradas para as imagens de apresentação baseadas no Chromium navegadores

Se quiser contribuir mais ou ajudar com suporte adicional ao navegador, A PWACompat está no GitHub.

Faça um teste

A PWACompat está disponível no Airhorner, v8.dev e Emojityper. Os sites cabeçalho HTML pode ser simples: basta especificar o manifesto e deixar a PWACompat lidar com o resto.

📢🤣🎉