Esta página foi traduzida pela API Cloud Translation.

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

Kayce Basques

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. Você precisa ter acesso a um dispositivo iOS.

Medida

Abra o app de exemplo em uma nova guia:

Clique em Remixar para editar para tornar o projeto editável.
Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
Anote o URL do seu app de exemplo. Será algo como https://example.glitch.me.

Faça uma auditoria de PWA do Lighthouse no seu app de exemplo no Chrome DevTools:

Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
Clique na guia Lighthouse.
Verifique se a caixa de seleção Progressive Web App está marcada na lista Categorias.
Clique no botão Gerar relatório.

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

A auditoria não fornece uma auditoria apple-touch-icon válida

Adicionar o app de exemplo a uma tela inicial do iOS

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

Abra o Safari para iOS.
Abra o URL do seu app de exemplo. Esse é o URL, como https://example.glitch.me, que você anotou anteriormente.
Toque em Compartilhar > Adicionar à tela inicial. Provavelmente você terá que deslizar para a esquerda para ver essa opção.
Toque em Adicionar.

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

Ícone da tela inicial gerado automaticamente.

Adicionar um ícone de toque da Apple ao app de exemplo

Remova a marca de comentário 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 aplicativo de exemplo a uma tela inicial do iOS (novamente)

Tente adicionar novamente o app de exemplo a uma tela inicial do iOS. Desta vez, um ícone adequado é gerado para o site. Se você auditar a página novamente com o Lighthouse, também verá que a auditoria não fornece uma apple-touch-icon válida agora é aprovada.

Ícone de toque da Apple.