Os usuários do Safari para iOS podem adicionar manualmente Progressive Web Apps (PWAs) aos usuários na tela inicial. O ícone que aparece na tela inicial do iOS quando um PWA é adicionado é chamado ícone do Apple Touch 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:
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
.
Execute 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 Otimizado para PWA, o Lighthouse relata que o aplicativo de exemplo não fornece um endereço Ícone de toque da Apple.
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 sofisticada, primeiro tente adicionar o aplicativo 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ê anotado antes. - Toque em Compartilhar > Adicionar à tela inicial. Provavelmente, será necessário 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 gera apenas um ícone para o site do conteúdo da página.
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 da<head>
deindex.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 de novo a uma tela inicial do iOS. Desta vez, um ícone adequado é gerado
o site. Se você auditar a página novamente com o Lighthouse, também verá que o
Não fornece uma auditoria de
apple-touch-icon
válida agora.