Adicionar um ícone de toque da Apple ao seu Progressive Web App

Kayce Basques
Kayce Basques
X GitHub Falha

Os usuários do Safari para iOS podem adicionar manualmente Progressive Web Apps (PWAs) à tela inicial. O ícone que aparece na tela inicial do iOS quando um PWA é adicionado é chamado de ícone de toque da Apple. Este codelab mostra como adicionar um ícone de toque da Apple a um PWA. Ele pressupõe que você tem acesso a um dispositivo iOS.

Medir

Abra o app de exemplo em uma nova guia:

  1. Clique em Remix to Edit para tornar o projeto editável.

  2. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.

  3. Anote o URL do app de exemplo. Ele será algo como https://example.glitch.me.

Execute uma auditoria de PWA do Lighthouse no seu app de exemplo no Chrome DevTools:

  1. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
  2. Clique na guia Lighthouse.
  3. Verifique se a caixa de seleção App Web progressivo está marcada na lista Categorias.
  4. Clique no botão Gerar relatório.

Na seção PWA otimizada, o Lighthouse informa que o app de exemplo não fornece um ícone Apple Touch válido.

Não fornece um apple-touch-icon válido
A auditoria Não fornece um apple-touch-icon válido

Adicionar o app de exemplo a uma tela inicial do iOS

Para demonstrar como um ícone de toque da Apple oferece uma experiência de usuário mais refinada, primeiro adicione o app de exemplo à tela inicial do dispositivo iOS quando um ícone de toque da Apple não tiver sido especificado.

  1. Abra o Safari para iOS.
  2. Abra o URL do app de exemplo. Esse é o URL como https://example.glitch.me que você observou anteriormente.
  3. Toque em Compartilhar Botão "Compartilhar" da Apple > Adicionar à tela inicial. Talvez seja necessário deslizar para a esquerda para ver essa opção.
  4. Toque em Adicionar.

Como o site não especificou um ícone do Apple Touch, o iOS gera um ícone para o site com base no conteúdo da página.

Um ícone da tela inicial gerado automaticamente.
Ícone da tela inicial gerado automaticamente.

Adicionar um ícone do Apple Touch ao app de exemplo

  • Remova os comentários da tag <link rel="apple-touch-icon"> na parte de baixo do <head> de index.html.
    …
    <link rel="stylesheet" href="/index.css">
    <link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
    <!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
    <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
  </head>
  …

Adicionar o app de exemplo a uma tela inicial do iOS (novamente)

  • Tente adicionar o app de exemplo à tela inicial do iOS novamente. Dessa vez, um ícone adequado é gerado para o site. Se você auditar a página novamente com o Lighthouse, também vai notar que a auditoria Não fornece um apple-touch-icon válido agora é aprovada.
O ícone do Apple touch.
O ícone do Apple Touch.