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 Principal” más recientemente llamada "Instalar Aplicación Web" con Android Instant Apps.
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).
Bajo el Código <head> pegamos
<meta name="mobile-web-app-capable" content="yes">
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).
El codigo bajo la etiqueta <head> iria algo así.
<meta name="mobile-web-app-capable" content="yes"/>
<link rel="shortcut icon" sizes="196x196" href="URL del Icono"/>
Con estos sencillos pasos, podemos agregar una WebApp a la pantalla de nuestro equipo, y que luzca realmente como una Aplicación instalada.
Con estos sencillos pasos, podemos agregar una WebApp a la pantalla de nuestro equipo, y que luzca realmente como una Aplicación instalada.
Ventajas y desventajas de esta 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.
La WebApp ya luce como una aplicación nativa, aunque al visualizar las Apps abiertas en Android, esta lucirá como un acceso directo de Chrome con el nombre "Aplicación Web".
La WebApp ya luce como una aplicación nativa, aunque al visualizar las Apps abiertas en Android, esta lucirá como un acceso directo de Chrome con el nombre “Aplicación Web”.
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.
Cuando salimos de nuestra WebApp hacia un link externo, Google para Android visualizará en el extremo superior la URL hacia la cual ha navegado, por una cuestión de seguridad y privacidad del usuario.
Cuando salimos de nuestra WebApp hacia un link externo, Google para Android visualizará en el extremo superior la URL hacia la cual ha navegado, por una cuestión de seguridad y privacidad del usuario.
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.
Fuente | DonWeb News
Quizás te interese: Soporte de Color Desde Chrome 39 en Android
