![En la sección [Teclado] podremos indicar en qué contexto las combinaciones de Windows funcionarán integralmente.](https://donweb.news/wp-content/uploads/2016/10/portada1.jpg)
En un rápido repaso por el ecosistema web del Androide más famoso de estos últimos años, nos encontramos con una nueva y esperada característica que es de suma utilidad para desarrolladores y diseñadores web.
Una semana después de publicado nuestro artículo «Desarrollo de WebApps para iOS», Google nos sorprende con una nueva actualización de su navegador web Chrome para Android. La recientemente lanzada versión (32) de Google Chrome, incorpora una característica muy reclamada durante muchos años por los desarrolladores y diseñadores web: La opción «Agregar a Pantalla Ppal».
Si bien Chrome para Android tuvo desde sus inicios esta característica, la misma no sacaba partido por sobre la clásica opción de agregar un acceso directo a una web en cualquier escritorio o pantalla de inicio de un dispositivo.
Por otra parte iOS, como bien contamos en el inicio de la nota mencionada, mantuvo por siempre la característica de poder agregar a la pantalla de inicio un sitio web, cuya estructura HTML cumpliera un cierto estándar marcado por Apple, de manera tal que dicha WebApp se instale y luzca como una aplicación nativa en los dispositivos móviles.
La voz del desarrollador
Por fin, luego de tantos años, Google se preocupó por escuchar y hacerle caso a sus principales feligreses, quienes verdaderamente construyen un sinfín de herramientas y utilidades diarias, alrededor de los navegadores más populares con la tecnología más usada en el momento.
Así es como, a partir de la versión 31 Beta de Chrome, comenzó el cambio hacia el ecosistema que permite instalar un sitio web con características específicas incluidas como declaraciones en sus etiquetas <Meta>, que permiten convertir a este en una App más dentro de nuestros dispositivos móviles. Google bautizó esta característica como (full-screen App mode).
Lo que básicamente ocurre en Android, al igual que lo hacemos en Safari para iOS, es crear un acceso directo a nuestra WebApp en la pantalla y que esta se vea al inicializarla como una aplicación nativa dentro del dispositivo.
Manteniendo la compatibilidad
Muchos desarrolladores optaron por plasmar esta característica específica dentro de sus sitios web, y que estos se integren al escritorio de iOS como una aplicación nativa. Google por su parte, implementó algunos estándares basados en las etiquetas , y a su vez creó compatibilidad con las etiquetas de Apple para que un desarrollador/diseñador web no deba intervenir sus trabajos uno por uno.
Condimentos para la compatibilidad de una web
Hagamos un repaso de lo que Google nos ofrece para poder instalar en la pantalla de inicio un sitio web, de manera óptima dentro del sistema operativo Android.
WebApp Capable
Dentro de la página principal de la web, debemos incluir la siguiente característica que permite compatibilizar la misma con el escritorio de Android, integrándose y ejecutándose en modo (full-screen webapp).
<head> ... <meta name="mobile-web-app-capable" content="yes"> ... </head>
Si estudiamos esta misma característica dentro del tag utilizado en iOS, encontramos que sólo cambia su nombre, anteponiendo la palabra (Apple).
Definir el nombre de la webApp
Chrome no implementa dentro de su estándar una etiqueta que permita definir el nombre con el que se creará el acceso directo a la aplicación. Por defecto tomará el título impuesto en la página a través de la correspondiente etiqueta.
Apple, por su parte, sí definió una etiqueta específica en la cual podemos definir el nombre que llevará la aplicación (apple-mobile-web-app-title). Al momento de implementar esta solución en Chrome, debemos tener cuidado en el nombre seleccionado para identificar la página web, ya que debe ser corto.
Si bien algunos íconos dentro del menú de aplicaciones de Chrome poseen su nombre separado en dos renglones, aquellos que se sitúan en la pantalla inicial del sistema operativo se ven limitados entre 12 y 14 caracteres en aquellos smartphones que no poseen soporte hdpi.
ShortCut Icon
Para identificar la webApp en la pantalla de Android, necesitamos también un ícono que la identifique, el cual será visualizado en esta. En base a la compatibilidad con los tags de Apple, son soportados los tags (apple-touch-icon) y (apple-touch-icon-precomposed), pero al igual que lo explicado en el Tag (web-cappable), Google recomienda adoptar el tag (shortcut icon), definiendo la imagen en un tamaño de 196×196 píxeles.
El tamaño mencionado es soportado por múltiples resoluciones, aunque de no implementarlo, Chrome usará por defecto el tag (apple-touch-icon) de 128×128 píxeles, propio de iOS. Si optamos por no agregar un ícono específico para esta resolución, y tampoco utilizamos el tag de iOS, entonces Chrome definirá por defecto utilizar el clásico (favicon).
<head> ... <meta name="mobile-web-app-capable" content="yes"> <link rel="shortcut icon" sizes="196x196" href="icono196x196.png"> ... </head>
Ventajas y desventajas de la nueva característica
A pesar del gran salto que dio Android, y de la antigüedad de esta característica en iOS, podemos encontrar algunas diferencias notorias entre las plataformas mencionadas. Por ejemplo en iOS, cuando cargamos una WebApp, y pasamos a utilizar otras aplicaciones, y luego retornamos a la webApp, notaremos que la misma vuelve a cargarse desde la página inicial.
En Android, esto no pasa. La WebApp mantiene su estado, volviendo a verse en la página hasta donde habíamos navegado. En este Aspecto, Android demuestra un sistema verdaderamente multitarea respecto a iOS.
Por su parte, iOS nos brinda la característica de poder incluir una Splash Screen, que termine de mostrar nuestra WebApp como una App nativa. Android por el momento no soporta esta característica, como tampoco permite especificar un título para la WebApp mediante un Tag específico.
iOS, al navegar dentro de las aplicaciones abiertas, muestra nuestra WebApp con el nombre especificado en el tag (apple-mobile-web-app-title), mientras que Android sólo muestra «Web App» o «Aplicación web» como nombre. Tampoco visualiza la misma con el ícono correspondiente, sino con el ícono de Chrome, acompañado de la flecha propia de un acceso directo.
Android incorporó una característica para cuando una WebApp nos lleva hacia otra dirección web, distinta a su URL, esta será mostrada en el extremo superior de la pantalla de Android. iOS no tiene disponible esta característica por lo tanto, si salimos de la WebApp hacia otra URL, nunca nos enteraremos.
Otra ventaja de las WebApps en Android es que mantienen un registro de las páginas navegadas, por lo tanto, el botón Atrás de Android nos permitirá retornar hacia el inicio de la WebApp. iOS no posee esta característica, a menos que agreguemos los botones pertinentes dentro de la WebApp correspondiente.
El problema surge cuando navegamos la Web a través del navegador Safari. El tener un botón para navegar hacia atrás/adelante, duplicaría los botones que permiten lograr esta acción, ya que la barra de herramientas de Safari cuenta con estos botones.
Conclusión
Si bien Android no ha incorporado una batería de novedades dentro de la opción «Agregar a Pantalla Ppal», al menos ha dado un gran paso, respetando las necesidades de los desarrolladores web. Este reclamo se mantuvo con los años porque, a pesar de existir Google Play y su ecosistema de comercialización de Apps para móviles, Google mantiene una filosofía importante del lado de Chrome Desktop, promoviendo el desarrollo de WebApps y no de aplicaciones nativas.
Las WebApps benefician a Chrome tanto en los escritorios Windows, Linux, Mac, como también a las novedosas Chromebooks, un estilo de computadora que viene imponiéndose desde hace algunos años. Esperemos que Google siga potenciando a Android y Chrome con mayores características pensadas exclusivamente para los desarrolladores y diseñadores web.
Aprovechando estos cambios, les dejamos a continuación el link de descarga del proyecto realizado para iOS, adaptado para Android y Chrome 32.0. Descargar haciendo clic aquí.
Alex says:
Hola, realmente las web apps se están convirtiendo en las apps del futuro ya que, cada vez más, permiten las mismas prestaciones que una app nativa. La función Add To HomeScreen es sólo una de las múltiples funciones que permiten las webapps (también hay por ejemplo la posibilidad de poner una imagen de inicio (Splash)) y también permiten enviar notificaciones a los ordenadores que han dado permiso (como si fuera una app instalable). Uno de los creadores de Web apps que he visto que aprovechan todas estas nuevas funcionalidades es http://www.socialcreator.com
Saludos !!!
Alex says:
Hola, realmente las web apps se están convirtiendo en las apps del futuro ya que, cada vez más, permiten las mismas prestaciones que una app nativa. La función Add To HomeScreen es sólo una de las múltiples funciones que permiten las webapps (también hay por ejemplo la posibilidad de poner una imagen de inicio (Splash)) y también permiten enviar notificaciones a los ordenadores que han dado permiso (como si fuera una app instalable). Uno de los creadores de Web apps que he visto que aprovechan todas estas nuevas funcionalidades es http://www.socialcreator.com
Saludos !!!