Desarrollo de WebApps para iOS

Siguiendo por la ruta de las aplicaciones móviles, ha llegado el turno de detenernos en el ecosistema de iOS. El sistema operativo que desencadenó que el mundo gire alrededor de las tiendas de aplicaciones, tuvo un inicio muy distinto al que todos conocemos, y te lo vamos a contar en esta nota.

A mediados del año 2006 el rumor de que Apple desembarcaría en el mercado de la telefonía celular tomaba cada vez más fuerza. El mundo expectante soñaba con un dispositivo que revolucionara el mercado de la telefonía móvil, aunque desde varios años antes ya existían diversos modelos de equipos en los cuales se contaba, entre otras cosas, con pantallas táctiles.

Algunos Smartphones previos al lanzamiento de iPhone. Desde fines de la década del 90' hasta mediados del 2000, estos equipos reinaban el mundo de la telefonía móvil inteligente.
Algunos Smartphones previos al lanzamiento de iPhone. Desde fines de la década del 90′ hasta mediados del 2000, estos equipos reinaban el mundo de la telefonía móvil inteligente.

Hasta el momento previo a la gran revolución causada por Apple, Sony Ericsson y Nokia eran líderes indiscutidos en el mercado móvil, con grandiosos equipos considerados teléfonos inteligentes. En muchos países, sobre todo de América, el favorito de muchos por su revolucionaria red de conexión por afuera de la red telefónica era Blackberry, quien asombraba con su teclado QWERTY, Blackberry Messenger y conectividad a la red Internet sin necesidad de pagar un abono extra por un pack de datos.

Aun así, el mundo esperaba un batacazo que revolucionara este mercado y Apple, quien siempre se distinguió en el mundo de la innovación informática, tenía todas las fichas puestas por su Fans, las grandes corporaciones y también por el periodismo IT.

Luego de innumerables versiones futuristas de cómo iba a ser el equipo de Apple, finalmente Apple desembarcó de manera oficial con el comunicado del lanzamiento de un producto que renovaría por completo el mercado de la telefonía móvil.

En una era en la que aún no existían las redes 3G, 4G, LTE, y que apenas el Wi-Fi iba tomando un poco de color en las corporaciones y algunos equipos portátiles, el producto que Apple traía entre manos iba a revolucionar la industria de la telefonía móvil. Así fue como el 29 de Junio de 2007 Apple “reinventó el teléfono móvil”.

Steve Jobs en la Keynote - presentación del primer iPhone, el 29 de Junio de 2007.
Steve Jobs en la Keynote – presentación del primer iPhone, el 29 de Junio de 2007.

Un cambio de último momento

Lo más novedoso que llegó junto con el iPhone no fue sólo su procesador de algo más de 400 MHz y capacidad de almacenamiento de 8 o 16 GB junto a una pantalla multitáctil, sino que se inauguraba también una novedosa era comercial de aplicaciones realizadas a medida.

Unas semanas después del lanzamiento de la primera versión de iPhone, llegó al mercado el iPod Touch. El equipo era similar al iPhone con la única diferencia de que no incorporaba el hardware que le permitiera realizar llamadas telefónicas. Ambos equipos corrían en su interior el sistema operativo iOS, el cual dentro de sus principales novedades contaba con una versión reducida de varias aplicaciones que existían en OS-X: entre ellas Safari Browser.

Safari Browser era muy similar a la versión de escritorio de este navegador web pero permitía, mediante una adaptación especial en su motor, potenciar las páginas web con funcionalidades adicionales que podrían explotar de una manera más inteligente el hardware del teléfono.

La tienda de Apple, iTunes, dispone el día de hoy de más de 775.000 aplicaciones desarrolladas exclusivamente para iOS.
La tienda de Apple, iTunes, dispone el día de hoy de más de 775.000 aplicaciones desarrolladas exclusivamente para iOS.

Estas funcionalidades nacieron por parte del equipo de desarrollo de Apple, ya que la primera intención de la firma de la manzanita era que todos los desarrolladores pudieran adaptar la web existente, que ya presentaba novedosas aplicaciones montadas en los Webservers que eran impulsadas por la combinación de JavaScript, CSS2 y la versión 4.1 de HTML, conocida por muchos como XHTML.

Esto permitiría potenciar las webs para que pudieran ser ejecutadas en Safari, y así obtener la atención de los usuarios quienes lograrían encontrar un ecosistema balanceado entre un teléfono inteligente con capacidades de una computadora de bolsillo.

Para esta época comenzó a acuñarse el término WebApp, que mostraba sobre una estructura web sitios que potenciaban su funcionalidad asimilándose a una aplicación de escritorio. Apple tomó la decisión de modificar Safari Browser para iOS, para que permitiera mediante algunas líneas de código html adicionales colocar un ícono en el escritorio de los iPhone que permitieran ejecutar estas webs para verse como aplicaciones del dispositivo móvil.

Con el tiempo, Apple declinó su intención de potenciar el mercado de aplicaciones descargables e instalables bajo una modalidad de pago anual por parte de todo aquel desarrollador que desee comercializar aplicaciones en el mercado de Apple. Mientras que este mercado, que se conocería un año después como AppStore, crecía el ecosistema de iPhone y iPod comenzó a minarse de aplicaciones web potenciadas por Safari.

Phonegap es una solución que permite desarrollar Apps que puedan instalarse en casi todos los dispositivos móviles, utilizando como punto de partida los tres pilares principales de la Internet de hoy: HTML5 + CSS + JS.
Phonegap es una solución que permite desarrollar Apps que puedan instalarse en casi todos los dispositivos móviles, utilizando como punto de partida los tres pilares principales de la Internet de hoy: HTML5 + CSS + JS.

Web App es igual a App

Si bien existe una fuerte discusión entre los desarrolladores de aplicaciones nativas y los desarrolladores web, podemos decir que una WebApp no se puede considerar como una aplicación nativa, desarrollada para iOS, ya que la WebApp no puede explotar todas las capacidades existentes en un smartphone, pero por suerte soluciones como Phonegap pueden llevar las WebApps a un nivel más alto con poco esfuerzo.

Igualmente, nos concentraremos sólo en iOS y en cómo adaptar una web para que pueda verse como una aplicación nativa dentro del ecosistema de Apple, encabezado por iPhone, iPod Touch y iPad.

Safari Meta Tags

El browser Safari incluye una capacidad de detectar ciertas etiquetas dentro de HTML, que permitirán saber si un sitio web puede verse en iOS como una aplicación nativa.

Visualización de la web

Veamos a continuación los meta tags más importantes que permitirán visualizar correctamente una web dentro del sistema operativo iOS. Todos estos deben incluirse dentro del tag <head>…</head> de un archivo HTML:

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

Esta etiqueta indica que la web deberá ejecutarse en el navegador web Safari a pantalla completa. Fue implementada para funcionar desde la versión 2.1 del sistema operativo iOS, con lo cual, toda web que corra de manera óptima en la primera generación de iPhone podrá tener su visualización a pantalla completa, simulando ser una App más del teléfono.

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

Esta etiqueta manipula la barra de estado del navegador web, especificando un color determinado. Dentro de los colores a especificar podemos elegir Black (negro), lo que hará que el contenido web sea mostrado por debajo de la barra de estado, y black-translucent (negro con una leve transparencia), que hará que el contenido web sea mostrado a pantalla completa, obscureciendo la barra de estado a un nivel casi transparente.

<meta name="format-detection" content="telephone=no">

Safari Browser para iOS formatea de manera predeterminada todo número de teléfono que figure en una página web pre-visualizada, para que, al hacer un tap (clic en pantallas táctiles) sobre éste, se inicie el mecanismo de llamada de iPhone.

Si configuramos , este seteo automático del número de teléfono quedará deshabilitado.

<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">

La etiqueta es una de las más utilizadas desde el inicio de la era Mobile en el mundo web. Mediante este meta tag, podemos establecer si un sitio web puede redimensionarse (hacer zoom in – zoom out) en el navegador web móvil, si debe mantener por defecto un tamaño determinado inicial, si puede iniciarse en un determinado zoom y redimensionarse hasta otro zoom, o simplemente cómo se verá cuando se inicializa.

Mediante la etiqueta podemos especificar el ancho fijo que debe tener nuestro sitio web. Puede ser como el descrito en este ejemplo, o adaptarse dependiente de la capacidad máxima de la pantalla del dispositivo al tamaño por defecto donde se carga el sitio web.

Para ello debemos modificar el código del ejemplo: , por . Esto ajustará por defecto el ancho de la página web al ancho máximo soportado por el browser del equipo. Por ejemplo, la pantalla de iPhone primera generación tenía un máximo de 320 píxeles de resolución, mientras que la pantalla de iPhone 5S soporta un máximo de resolución de 640 píxeles.

Íconos web

A diferencia de los clásicos iconos que podemos poner en nuestros sitios web, y que ya casi ningún navegador permite visualizar, Safari browser para iOS incluyó una modificación en el sistema de íconos que permite mostrar el mismo dentro de iOS, con el estilo propio de los íconos utilizados por las diferentes aplicaciones de este sistema operativo.

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

Para instalar una web como aplicación nativa en iOS, se debe tener en cuenta el uso correcto de un ícono acorde, que permita identificar la webApp en el escritorio de iOS. A diferencia de los íconos que representan una web común, el formato de estos para ser instalados en iOS debe ser PNG. Este puede estar en la misma ruta que la página principal del sitio, o en una subcarpeta, aclarando la misma en la referencia <href>.

Como el tiempo trajo diferentes versiones de iOS, Safari browser y otros productos, como ser iPad, que han ido avanzando generacionalmente e incluyendo mejoras en la resolución de pantallas, Apple fue modificando el meta tag para que pudieran incluirse diferentes tamaños y resoluciones de íconos, dependiendo de la versión de iOS donde se instale la WebApp.

A continuación, las diferentes opciones con sus respectivos tamaños según el S.O.:

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

En el nombre especificado para el ícono encontraremos la referencia correspondiente en qué tipo de dispositivo será correctamente visualizado. También podemos utilizar un único ícono para todas las plataformas que corren iOS, aunque con las últimas versiones de iOS el ícono puede tener un pixelado por la mayor resolución de pantalla.

Splash Screen

En iOS, de manera similar a las aplicaciones nativas, podemos especificar una imagen que funcione a modo de pantalla de inicio, o Splash Screen, que visualice determinada información de nuestra WebApp, mientras se lanza la aplicación web. Si bien esta característica no es muy utilizada, generalmente es más que útil cuando la WebApp tiene capacidades adicionales que permiten visualizar la misma en modo Offline.

La sintaxis para incluir una pantalla de inicio es la siguiente:

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

Cuando instalamos una WebApp para que simule ser una App nativa en iOS, al iniciar esta, si no se incluye el meta tag mencionado, Apple mostrará por defecto un Splash Screen de una captura de pantalla realizada a la aplicación.

Proyecto de ejemplo

A continuación les dejamos el link a un pequeño proyecto de ejemplo, que permitirá llevar una página web hacia la modalidad de WebApp. Para este caso utilizaremos la web de Dattamagazine.com. El código de nuestro ejemplo se visualizará de la siguiente manera en el navegador web Safari de un dispositivo iOS:

Con algo menos de 40 líneas de código, obtenemos un sitio web listo para ser bajado a un dispositivo iOS como una WebApp.
Con algo menos de 40 líneas de código, obtenemos un sitio web listo para ser bajado a un dispositivo iOS como una WebApp.

Agregar la web a la pantalla de inicio de iOS

Por último, nos queda agregar la página web a la pantalla de inicio del dispositivo iOS, para ello debemos hacer un tap sobre el ícono «Compartir» de la barra de herramientas de Safari, y luego elegir la opción «Añadir a la pantalla inicio».

Añadimos la WebApp a la pantalla de inicio de iOS mediante el botón Compartir del navegador web Safari.
Añadimos la WebApp a la pantalla de inicio de iOS mediante el botón Compartir del navegador web Safari.

Por defecto nos mostrará un mensaje con la información del nombre de la WebApp, la URL de la misma y el ícono con el que se visualizará la misma en el escritorio de iOS. Presionamos el botón «Añadir» y veremos la WebApp en la pantalla principal de iOS.

Podemos dejar por defecto el nombre de la WebApp ofrecido por iOS o cambiar el título del mismo. Recordemos que el título descriptivo no debe ser extenso.
Podemos dejar por defecto el nombre de la WebApp ofrecido por iOS o cambiar el título del mismo. Recordemos que el título descriptivo no debe ser extenso.

Por último, ejecutamos la WebApp desde el ícono creado en la pantalla de iOS, y veremos cómo la misma se inicia de tal manera que simulará ser una aplicación nativa de iOS. Debemos tener en cuenta que con esta modalidad necesitaremos tener conexión para utilizar la WebApp, si no nos dará un error al cargar de que no puede encontrar la URL.

La WebApp ya se ejecuta a través del motor web del navegador Safari, pero de manera independiente, como si fuera una aplicación nativa de iOS.
La WebApp ya se ejecuta a través del motor web del navegador Safari, pero de manera independiente, como si fuera una aplicación nativa de iOS.

Con algunos cambios en la estructura del sitio web, que veremos en las próximas entregas, aprenderemos a controlar la ejecución de nuestra WebApp en modo Offline. Les queda a ustedes, según lo explicado en este artículo, diseñar un Splah Screen para sus WebApps e incluirlos en el código HTML del archivo index.html.

Conclusión

iOS dispone de estas excelentes herramientas, que poca difusión tuvieron ya que Apple se encargó de priorizar la creación de aplicaciones nativas lo que terminó generando un mercado billonario en el mundo de los dispositivos móviles.

Igualmente, mientras estas características puedan ser utilizadas en iOS, nosotros como programadores podremos sacar provecho de ellas para crear y distribuir excelentes aplicaciones web, sin necesidad de pasar por el AppStore.

Descarga el proyecto de prueba haciendo CLIC AQUÍ.