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.
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.
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çãostandalone
,fullscreen
ouminimal-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.
📢🤣🎉