Mejora tus PWA con etiquetas HTML para iOS y Android

Las aplicaciones web progresivas (PWA) se están convirtiendo en una forma cada vez más popular de ofrecer experiencias móviles de alta calidad a los usuarios. Las PWA se pueden acceder a través de un navegador web como a un sitio tradicional, al mismo tiempo que pueden proporcionar una experiencia similar a la de una aplicación nativa con características como funcionalidad offline, notificaciones push y un icono en la pantalla de inicio del móvil.

Aunque las aplicaciones web progresivas, como su nombre lo indica están basadas en tecnología web, deben ejecutarse en un dispositivo móvil y eso significa que en algunos casos deben tener ajustes especiales para funcionar correctamente en este entorno, de igual manera, al igual que ocurre con las aplicaciones nativas, cada sistema operativo tiene sus capacidades específicas y por ello necesitan pequeños ajustes para aprovechar al máximo cada plataforma.

Una de las soluciones que pueden ayudarte a mejorar la experiencia de los usuarios en tu PWA es a través de etiquetas HTML con metadata adicional, estas etiquetas no afectan el código mientras se ejecutan en un navegador web, pero entran en acción cuando tus aplicaciones se ejecutan en un entorno móvil.

Vamos a explorar algunas de las etiquetas más relevantes para el desarrollo de aplicaciones web móviles

Etiquetas de Uso general

Estas etiquetas te ayudarán a mejorar tus PWAs en los principales sistemas operativos, en muchos casos son elementos indispensables como por ejemplo enlazar el documento manifest.json, mientras que otros casos te ayudarán a crear una experiencia más inmersiva. Veamos algunos ejemplos:

Enlazar documento con el manifest.json

<link rel="manifest" href="manifest.json">

Se utiliza para hacer referencia al archivo Web App Manifest, que proporciona metadatos sobre la PWA, incluyendo su nombre, iconos y URL de inicio. Al incluir esta etiqueta, puedes asegurarte de que tu PWA sea detectable y fácil de instalar en dispositivos Android.

Definir esquema de color

<meta name="theme-color" content="#000000">

Esta etiqueta se utiliza para establecer el color del cromo del navegador para que coincida con el esquema de color de su PWA. Al hacer esto, puedes crear una experiencia más inmersiva para los usuarios y hacer que tu PWA se sienta más como una app nativa.

Tamaño y apariencia del área de trabajo

<meta name="viewport" content="width=device-width, initial-scale=1">

Este meta tag se utiliza para asegurar que la PWA es responsive y se escala adecuadamente para adaptarse al dispositivo del usuario.

Escala del área de trabajo

<meta name="viewport" content="viewport-fit=cover">

Se utiliza para garantizar que el contenido de la PWA se ajusta al área segura de la pantalla del dispositivo.

Ejecutar en modo autónomo

<meta name="mobile-web-app-capable" content="yes">

Utilizado para indicar que la PWA debe lanzarse en modo autónomo en dispositivos Android, sin la interfaz del navegador.

Etiquetas HTML para iOS

Cuando se trata de dispositivos iOS, hay etiquetas HTML específicas que pueden ayudar a mejorar la experiencia de tu PWA, veamos algunas de las más populares:

Ejecutar app en pantalla completa

<meta name="apple-mobile-web-app-capable" content="yes"> 

Se utiliza para indicar que tu PWA debe mostrarse sin el cromo del navegador, como una app nativa. Esto permite a los usuarios añadir tu PWA a su pantalla de inicio e iniciarla como una app nativa.

Color de la barra de estado

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Esta etiqueta se utiliza para establecer el color de la barra de estado en la parte superior de la pantalla cuando se lanza la PWA. El valor puede ser "default", "black", "black-translucent" o "white".

Título de la aplicación

<meta name="apple-mobile-web-app-title" content="Mi PWA">

Este valor se utiliza para establecer el título que aparece bajo el icono de la PWA en la pantalla de inicio del usuario.

Icono de la aplicación

<link rel="apple-touch-icon" href="icon.png">

Esta etiqueta de enlace se utiliza para especificar el icono que debe utilizarse cuando la PWA se añade a la pantalla de inicio del usuario. Es importante proporcionar imágenes de iconos de alta calidad en diferentes tamaños para asegurar que la PWA se ve muy bien en una variedad de dispositivos.

Ejecutar en pantalla completa

<meta name="apple-mobile-web-app-capable" content="yes">

Permite que la PWA se ejecute en modo de pantalla completa, sin la interfaz del navegador Safari.

Imagen de inicio

<meta name="apple-touch-startup-image" content="splash.png">

Establece la imagen que aparece durante el inicio de la PWA.

Ejecutar en pantalla completa

<meta name="apple-touch-fullscreen" content="yes">

Se utiliza para permitir que la PWA se ejecute en modo de pantalla completa.

Puedes encontrar una lista completa de Meta tags soportados por safari en la documentación oficial de Apple 

PWAs en Modyo

Al crear tus PWA en la plataforma Modyo, no tienes que preocuparte por los detalles de creación e instalación del archivo manifest.json o de los service workers que ya vienen instalados y se generan automáticamente, nos encargamos incluso de optimizar las imágenes para que tus aplicaciones tengan soporte en múltiples resoluciones sin que tengas que abrir ningún programa de edición o retoque. 

Todas las aplicaciones Modyo tienen soporte nativo para Progressive web applications, si quieres aprender más sobre su uso y como habilitarlas hoy mismo no te pierdas este workshop exclusivo para nuestra comunidad donde te mostramos cómo paso a paso cómo activar tu PWA.

¿Por qué es importante incluir estas etiquetas?

Incluir etiquetas HTML y características tanto para Android como para iOS es importante porque te permite ofrecer una experiencia consistente y de alta calidad a los usuarios, independientemente de la plataforma que estén utilizando. Al incluir etiquetas HTML específicas, puedes asegurarte de que tu PWA se vea y se sienta como una aplicación nativa tanto en dispositivos Android como iOS, haciéndola más atractiva y fácil de usar.

Además, la inclusión de etiquetas y características HTML puede ayudar a mejorar la visibilidad de tu PWA en ambas plataformas. Al incluir el archivo Web App Manifest y establecer metadatos específicos, puedes asegurarte de que tu PWA sea fácilmente detectable por los usuarios y se pueda añadir a su pantalla de inicio con sólo unos toques.

Puedes encontrar un buen punto de partida para el código de tu PWA en este gist de Tommaso Marcelli y encontrar toda la información que necesitas para crear tus aplicaciones web progresivas en la documentación oficial de Modyo.

Foto por Clark Van Der Beken en Unsplash