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) 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:

  1. Clique em Remixar para editar para tornar o projeto editável.

  2. Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia tela cheia

  3. 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:

  1. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
  2. Clique na guia Lighthouse.
  3. Verifique se a caixa de seleção Progressive Web App está marcada na lista Categorias.
  4. 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.

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 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.

  1. Abra o Safari para iOS.
  2. Abra o URL do seu app de exemplo. Esse é o URL como https://example.glitch.me que você anotado antes.
  3. Toque em Compartilhar Botão de compartilhamento da Apple > Adicionar à tela inicial. Provavelmente, será necessário deslizar para a esquerda para ver essa opção.
  4. 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.

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

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> 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 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.
.
O ícone do Apple Touch.
O ícone do Apple Touch.