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

Kayce Basques
Kayce Basques
X GitHub

Los usuarios de Safari para iOS pueden agregar apps web progresivas (AWP) de forma manual a su pantalla principal. El ícono que aparece en la pantalla principal de iOS cuando se agrega una AWP se llama ícono de Apple Touch. En este codelab, se muestra cómo agregar un ícono de Apple Touch a una PWA. Se supone 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 se pueda editar.

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

  3. Toma nota de la URL de tu app de ejemplo. Será similar a https://example.glitch.me.

Ejecuta una auditoría de LPA 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 Progressive Web App esté seleccionada en la lista Categories.
  4. Haz clic en el botón Generar informe.

En la sección PWA Optimized, Lighthouse informa que la app de ejemplo no proporciona un ícono de Apple Touch 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 de Apple Touch 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 de Apple Touch.

  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 simplemente genera un ícono para el sitio a partir del contenido de la página.

Ícono de pantalla principal generado automáticamente.
Ícono de la pantalla principal generado automáticamente.

Agrega un ícono de Apple Touch 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="/https/web.developers.google.cn/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 volver 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.
Es el ícono táctil de Apple.
El ícono de Apple Touch.