Cómo configurar una aplicación web para iOS

Desde que Apple introdujo la posibilidad de desarrollar aplicaciones para el iPhone fue explícito al decir que existían dos formas de tener una aplicación corriendo en iOS (tres si contamos el Jailbreak como una opción). La primera es por supuesto mediante el uso de la App Store, el cuál a pesar de ser un procedimiento un poco tedioso nos asegura tener una aplicación nativa corriendo en nuestro dispositivo. El segundo es por medio de la web. Podemos hacer aplicaciones web y usarlas desde el navegador, haciendo que no nos limite Apple en cuanto a lo que queramos usar, siempre y cuando sean tecnologías estándar.

Pues bien, hoy vamos a ver cómo configurar lo más básico para hacer una aplicación web en iOS, ya que no basta sólo con desarrollarla, hay meta etiquetas que nos van a ayudar con cuestiones para mejorar la experiencia de usuario y que el usuario no pueda reconocer a simple vista si lo que está usando es una aplicación nativa o una aplicación web.

Notas

Apple introdujo la etiqueta meta viewport para controlar la forma en que se ve un sitio o aplicación web, como el manejo del zoom y el  responsive de acuerdo al tamaño de la pantalla. Hoy en día todos los navegadores móviles aceptan esta etiqueta, pero sólo esta, las demás al ser propiamente de Apple no aseguran que sirva en otros navegadores a excepción de Safari.

Para que las meta etiquetas surtan efecto tenemos que anclar nuestra aplicación web al inicio, para que se forme la app; una vez hecho eso se puede abrir y ver cómo funcionan las configuraciones.

Controlando dimensiones de la app

Con la etiqueta meta viewport podemos modificar las dimensines y la escala de nuestra app. Por defecto el iPhone escala un sitio web para que se vea todo el contenido al cargar, una vez hecho esto nosotros damos doble Tap o pinchamos para hacer escalar nuestra vista. Viewport lo que nos ayuda es a controlar eso, ya que no queremos que nuestra aplicación se escale, además de que queremos que ocupe todo el ancho de la pantalla.

Nosotros le definimos la escala mínima y máxima. La escala se maneja por números, 1 significa el nivel de zoom, y al restringir el mínimo y máximo con el mismo valor hacemos que no se pueda hacer zoom para alejar o acercar; 1 es el zoom preferido para escalar completamente nuestra app.

Mostrar nuestra app en pantalla completa

Con esta meta etiqueta podemos hacer que nuestra app corra en pantalla completa, de lo contrario correrá abriendo Safari, como cualquier sitio web.

Estilizar la barra de estatus

Permite personalizar la barra de estatus. Sólo funciona si la aplicación es definida en pantalla completa. Acepta dos valores, black para hacerla negra, o black-transparent para hacer un poco más traslucida.

Colocar el icono de la app

Para cuando anclemos la app en la pantalla de inicio aparezca con el ícono que nosotros especificamos.

Colocar una pantalla de lanzamiento

Sirve para que mientras carga la app nos muestre una pantalla de lanzamiento, así como lo hacen las apps nativas.

Conclusiones

Después de colocar estas meta etiquetas podemos empezar ya a desarrollar nuestra aplicación web, veremos que después de anclar nuestra app y abrirla pareciera que es una aplicación nativa de iOS. Ahora, desconozco si Microsoft y Google tienen su propia especificación para realizar esta simulación de app nativa, porque con estas metas no funcionan en los dispositivos con Windows Phone y Android, pero si las encuentro las publicaré.