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 to Edit 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á similar a https://example.glitch.me.

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

  1. Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
  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 Generar informe.

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

No proporciona un ícono de apple-touch-icon válido
La auditoría No proporciona una auditoría válida del ícono de apple-touch-icon

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 refinada, primero intenta agregar la app de ejemplo a la pantalla principal de tu dispositivo iOS cuando no se especifique un ícono táctil de Apple.

  1. Abre Safari para iOS.
  2. Abre la URL de tu app de ejemplo. Esta es la URL similar a https://example.glitch.me que anotaste antes.
  3. Presiona Compartir Botón Compartir en 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.

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

Cómo agregar un ícono de Apple Touch a la app de ejemplo

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

Vuelve a agregar la app de ejemplo a una pantalla principal de iOS

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