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 aplicaciones web progresivas (AWP) a su pantalla de inicio. El ícono que aparece en la pantalla principal de iOS cuando se agrega una AWP se llama el ícono de Apple Touch. En este codelab, se muestra cómo agregar un ícono táctil de Apple a una AWP. Se supone que 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 se pueda editar.

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

  3. Toma nota de la URL de tu app de ejemplo. Será algo así como https://example.glitch.me.

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

  1. Presiona `Control + Mayúsculas + J` (o `Command + Option + 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 Generate report.

En la sección Optimizada para AWP, Lighthouse informa que la app de ejemplo no proporciona una Ícono táctil de Apple.

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

Agrega la app de ejemplo a la 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 en la pantalla principal de tu dispositivo iOS cuando no se especifica un ícono táctil de Apple.

  1. Abre Safari para iOS.
  2. Abre la URL de la app de ejemplo. Esta es una URL (como https://example.glitch.me) que que mencionamos 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. 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>
  …

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

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