Cómo agregar un ícono táctil de Apple a tu app web progresiva

Kayce Basques
Kayce Basques
X GitHub Error

Los usuarios de Safari para iOS pueden agregar manualmente apps web progresivas (AWP) a su pantalla principal. El ícono que aparece en la pantalla principal de iOS cuando se agrega una AWP se denomina ícono táctil de Apple. En este codelab, se muestra cómo agregar un ícono táctil de Apple a una AWP. Se da por sentado que tienes acceso a un dispositivo iOS.

Medir

Abre la app de ejemplo en una pestaña nueva:

  1. Haz clic en Remix para editar para que el proyecto sea editable.

  2. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.

  3. Anota la URL de tu app de ejemplo. Será algo como https://example.glitch.me.

Ejecuta una auditoría de PWA de Lighthouse en tu app de ejemplo en las Herramientas para desarrolladores de Chrome:

  1. Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
  2. Haz clic en la pestaña Lighthouse.
  3. Asegúrate de que la casilla de verificación App web progresiva esté seleccionada en la lista Categorías.
  4. Haz clic en el botón Generate report.

En la sección AWP optimizada, Lighthouse informa que la app de ejemplo no proporciona un ícono táctil de Apple válido.

No proporciona un ícono apple-touch-icon válido
La auditoría No proporciona un ícono apple-touch-icon válido

Agrega la app de ejemplo a una pantalla principal de iOS

Para demostrar cómo un ícono táctil de Apple proporciona una experiencia del usuario más pulida, primero intenta agregar la app de ejemplo a la pantalla principal de tu dispositivo iOS cuando no se haya especificado un ícono táctil de Apple.

  1. Abre Safari para iOS.
  2. Abre la URL de tu app de ejemplo. Esta es la URL como https://example.glitch.me que anotaste antes.
  3. Presiona Compartir Botón Compartir de Apple > Agregar a la pantalla principal. Es probable que debas deslizar el dedo hacia la izquierda para ver esta opción.
  4. Presiona Agregar.

Como el sitio no especificó un ícono táctil de Apple, iOS solo genera un ícono para el sitio a partir del contenido de la página.

Ícono de pantalla principal generado automáticamente.
Un ícono de pantalla principal generado automáticamente.

Agrega un ícono táctil de Apple a la app de ejemplo

  • Quita el comentario de la etiqueta <link rel="apple-touch-icon"> en la parte inferior de <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>
  …

Agrega la app de ejemplo a una pantalla principal de iOS (otra vez)

  • Vuelve a agregar la app de ejemplo a una pantalla principal de iOS. Esta vez, se genera un ícono adecuado para el sitio. Si vuelves a auditar la página con Lighthouse, también verás que la auditoría No proporciona un apple-touch-icon válido ahora se aprueba.
El ícono táctil de Apple.
El ícono táctil de Apple.