Adicionando os ícones para PWAs no iOS

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 retina
  • 72×72px – iPad and iPad mini rodando iOS ≤ 6
  • 76×76px – iPad and iPad mini rodando iOS ≥ 7
  • 114×114px – iPhone com display retina iOS ≤ 6
  • 120×120px – iPhone com display retina rodando iOS ≥ 7
  • 144×144px – iPad and iPad mini com display retina rodando iOS ≤ 6
  • 152×152px – iPad and iPad mini com display retina rodando iOS 7
  • 180×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:

Botão de compartilhar do safari

Em seguida precisamos adicionar nossa aplicação na tela principal:

Tela com a opção adicionando a tela principal para adicionar ícones para PWAs no iOS

Por exemplo, uma aplicação sem a propriedade o ícone será um screenshot da sua aplicação como na imagem a seguir:

Exemplo de ícone sem a propriedade

Depois da adição do ícone apple-touch-icon o resultado será o seguinte:

Resultado final com a adição da propriedade.

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/

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.