Lograr que una Progressive Web App funcione correctamente en iOS requiere atención a detalles que Android resuelve de forma casi automática. Uno de los más frecuentes es el Apple touch icon, un ícono específico que Safari necesita para mostrar tu aplicación en la pantalla de inicio del iPhone. A continuación se explica cómo solucionar este problema, qué restricciones impone iOS y cómo realizar la instalación desde Safari.
¿Qué indica el reporte de Lighthouse sobre el ícono de Apple?
Al ejecutar el reporte de Lighthouse sobre la aplicación desplegada, la mayoría de los ítems aparecen en verde gracias a la configuración que Angular genera automáticamente. Sin embargo, dos puntos fallan [0:40]. Uno de ellos es el Apple touch icon, que indica que falta un enlace en el index.html para que iOS reconozca el ícono de instalación.
Cada ítem del reporte incluye una opción de learn more que explica exactamente qué agregar. En este caso, se necesita un tag <link> con la relación apple-touch-icon apuntando a una imagen de 180 por 180 píxeles [2:07].
¿Cómo agregar el enlace en el index HTML?
Dentro del archivo index.html de tu proyecto Angular, debes agregar la siguiente línea en la sección <head>:
html
<link rel="apple-touch-icon" href="assets/icons/icon-180x180.png">
El atributo rel debe ser exactamente apple-touch-icon y el href debe apuntar al archivo del ícono [1:40].
¿Cómo preparar el archivo de imagen correcto?
Los íconos del proyecto suelen venir en tamaños como 72x72, 192x192 o 512x512. Ninguno coincide con los 180x180 píxeles que iOS exige. Para resolverlo:
- Clona el ícono de 192x192 y renómbralo como
icon-180x180.png.
- Abre el archivo en cualquier programa de edición de imágenes.
- Ajusta las dimensiones a exactamente 180 por 180 píxeles [2:25].
- Guárdalo en formato PNG sin fondo transparente, preferiblemente con fondo blanco.
El formato PNG es obligatorio para iOS. Si el fondo es transparente, el sistema mostrará un borde negro alrededor del ícono en la pantalla de inicio [7:30].
Tras realizar estos cambios, compila el proyecto con ng build y despliega nuevamente. Al volver a correr Lighthouse, el ítem del Apple touch icon aparecerá en verde [3:50].
¿Qué restricciones tiene instalar una PWA en iOS?
La instalación de una PWA en dispositivos Apple debe hacerse obligatoriamente desde Safari [4:30]. Esto se debe a que Safari utiliza WebKit como motor de renderizado, y Apple mantiene el control total sobre sus capacidades.
Existen dos limitaciones principales frente a Android:
- No hay botón automático de instalación. En Chrome o Edge aparece un prompt de install app, pero Safari no lo ofrece. La instalación se realiza manualmente desde el botón de compartir (share) y seleccionando "Agregar al inicio" [6:00].
- Las push notifications no funcionan igual. Apple utiliza su propio sistema llamado Apple Push Notification Services, que es independiente de Firebase Cloud Messaging. FCM envía notificaciones a Chrome y Android, pero no interactúa con el sistema de notificaciones de Apple [5:10].
Por otro lado, los service workers ya funcionan en Safari, lo que significa que el caché y la funcionalidad offline operan correctamente [5:45]. Apple ha ido habilitando características progresivamente, aunque aún no cubre todas las que Chrome soporta.
Vale la pena mencionar que Microsoft Edge ya soporta PWA completamente, e incluso la tienda de aplicaciones de Microsoft acepta PWAs como aplicaciones nativas de forma automática [4:50].
¿Cómo se instala la PWA desde Safari en iPhone?
El proceso de instalación manual es sencillo:
- Abre Safari y carga la URL de tu aplicación.
- Pulsa el botón de compartir (ícono central en la barra inferior).
- Selecciona la opción "Agregar al inicio".
- Confirma y la aplicación aparecerá como un ícono en tu home screen [6:10].
Una vez instalada, la aplicación se abre sin barra de navegación, luciendo como una aplicación nativa [6:40]. La actualización del ícono puede tardar un poco más en Safari comparado con otros navegadores.
Si las imágenes dentro de la app cargan lentamente, esto suele estar relacionado con la optimización de imágenes, un aspecto que Lighthouse también evalúa dentro de la sección de performance [7:10].
Queda un ítem pendiente en el reporte de Lighthouse. El reto es que lo soluciones y compartas en los comentarios todos los puntos en verde [4:10].
