Você gostaria de saber como adicionar ícones para PWAs no iOS nesse post você irá saber como. Para isso precisamos adicionar tags com diferentes tamanhos de imagens para serem usadas na tela principal dos usuários Apple, esses tamanhos mudaram com o passar dos anos em diferentes versões do Sistema operacional.
O que é uma PWA?
Progressive Web Apps – PWA (aplicações web progressivas) são desenvolvidas utilizando APIs modernas para fornecer novos recursos somente disponíveis em aplicações nativas. Recursos como confiabilidade e capacidade de instalação, ao mesmo tempo, estão totalmente disponíveis a qualquer usuário, em qualquer tipo dispositivo com uma única base de código.
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 uma propriedade rel="apple-touch-icon"
<link rel="apple-touch-icon" href="/endereço-do-meu_icone.png">Code language: HTML, XML (xml)Quais são os tamanhos necessários de ícones para PWAs no iOS
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 num dispositivo iOS o processo é um pouco escondido, primeiramente precisamos ir ao 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 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/
Deixe um comentário