Para adicionar ícones para PWA no iOS precisamos adicionar tags com diferentes tamanhos de imagens para serem usadas na tela principal dos usuário Apple, esses tamanhos mudaram com o passar dos anos em diferentes versões do Sistema operacional.
Nesse post vamos ver como Implementar esse recurso, Agosto de 2020 Safari ainda não segue as recomendações da W3C e utiliza um modo alternativo para definir os ícones de uma PWA, existe uma sinalização de parte do time do WebKit engine responsável pelo safari, mas isso já vem se arrastando a anos.
Enquanto o recurso na é padronizado precisamos, adicionar os ícones através da tag link passando um a propriedade rel=”apple-touch-icon”
<link rel="apple-touch-icon" href="/endereço-do-meu_icone.png">
Code language: HTML, XML (xml)
Como mencionei anteriormente o tamanho muda entre versões do iOS atualmente os tamanhos esperados são 192×192 ou 180×180. A imagem precisa ser um PNG sem transparência.
Em versões mais antigas do iOS antes da versão 7 a propriedade era rel=”apple-touch-icon-precomposed” nesse caso podemos adicionar mais de uma tag caso queira adicionar fallback em sua aplicação web para versões antigas do iOS. E caso queira implementar os fallbacks os tamanhos serão:
57×57px
– iPhone iPod Touch sem display retina72×72px
– iPad and iPad mini rodando iOS ≤ 676×76px
– iPad and iPad mini rodando iOS ≥ 7114×114px
– iPhone com display retina iOS ≤ 6120×120px
– iPhone com display retina rodando iOS ≥ 7144×144px
– iPad and iPad mini com display retina rodando iOS ≤ 6152×152px
– iPad and iPad mini com display retina rodando iOS 7180×180px
– iPad and iPad mini com display retina rodando iOS 8+
Para adicionar uma aplicação em um dispositivo iOS o processo é um pouco escondido, primeiramente precisamos ir no botão de compartilhar:
Em seguida precisamos adicionar nossa aplicação na tela principal:
Por exemplo, uma aplicação sem a propriedade o ícone será um screenshot da sua aplicação como na imagem a seguir:
Depois da adição do ícone apple-touch-icon o resultado será o o seguinte:
Esse é um conteúdo base do curso de PWA, para acompanhar as aulas acesso a playlist do curso: https://www.youtube.com/playlist?list=PLmIA3VZysEqQCi5xOJJDb5QIYgHwPhf_D
Para mais posts sobre Progressive web apps acesse a página da categoria: https://blog.fellyph.com.br/category/pwa/