img_post_desktop_a_mobile

Adaptando la web a plataformas móviles

Siguiendo con la serie de artículos relacionados a la investigación e implementación de nuevas tecnologías implementadas en el Panel de Control de Mango que empezó con un post acerca de la experiencia de usuario y el manejo de sesiones, en esta entrega nos enfocamos en el mundo de las plataformas para móviles.

Desde hace ya varios años con la llegada de los smartphones la computación móvil cobró una relevancia antes impensada. Los requerimientos a la hora de hacer aplicaciones se modificaron: las pantallas son en general más pequeñas, los recursos más escasos y la conectividad errática.

Este cambio de paradigma dejó a las aplicaciones web mal paradas. Las llamadas aplicaciones nativas coparon al mundo móvil. La capacidad de instalarse en el sistema operativo y acceder a APIs del mismo dejaron en claro la brecha entre esta nueva ola de aplicaciones específicas para la plataforma y la web. Se destaca la capacidad de respuesta ante situaciones de mala o nula conectividad y la performance a la hora de responder a patrones y eventos propios de pantallas táctiles, especialmente el scroll.

Entonces surge naturalmente la pregunta:

¿Cómo se puede adaptar la web a estos cambios?

Apps instalables

Tu ícono en la vidriera principal

Nos encanta ordenar el Homescreen de nuestro teléfono por orden alfabético, uso, categoría y hasta color. Es muy importante para las aplicaciones tener su ícono en tu pantalla y que la tengas siempre presente. Los navegadores suelen tener una opción de add to Homescreen pero es tan molesto que casi nadie lo usa. Tan así que hay documentos y widgets para ayudar a los usuarios.

Chrome para Android agrego una feature llamada Web App install banners. Si un usuario entra seguido a un sitio web que tiene un manifest.json  y un Service Worker (del cual hablaremos más adelante) declarados, el navegador le muestra al usuario un banner que permite agregar el sitio al Homescreen con un solo click.

mobile

El manifest.json nos permite entre otras cosas declarar un nombre, ícono y descripción de la app para el Homescreen. Otra propiedad muy interesante es display que al ser seteada como «standalone» quita los controles del navegador al ejecutar la app desde la pantalla de inicio, limpiando la interface.

Para que tengas, para que guardes, para que archives

El caballito de batalla que tiene la web para acercarse a las plataformas móviles son los llamados Service Workers, los cuales no vamos a explicar en detalle (existen excelentes artículos introductorios) sino a limitarnos a describir sus bondades. En un sentido muy amplio los Service Workers son scripts de JavaScript que corren en background y nos permiten hacer tareas que no requieren necesariamente de la interacción del usuario. Una cosa muy interesante que nos permiten hacer los Service Workers es manejar un caché de nuestra web.

Los Service Workers introducen el evento «install» que nos permite saber cuando una app va a ser instalada (en general es la primera vez que el usuario ingresa). En este momento podemos guardar todos los assets que queramos en un caché, permitiendo que los archivos se recuperen del dispositivo en vez de ir a internet. Los cachés son versionados y podemos gestionar y borrar cachés viejos. Esta feature permite web apps realmente instalables, que reaccionan instantáneamente al abrir, sin necesidad de ir a la web cada vez que las abrimos.

Offline first

Estado de la conexión – ¿Lobo estás?

Un problema que encontramos constantemente en el mundo móvil es la fluctuación en la conectividad. El cambio de antenas, servicios limitados y áreas sin cobertura producen incertidumbre ante el estado de conexión del usuario.

Desde IE8 tenemos disponible la propiedad navigator.onLine. Por un lado podemos consultar este booleano para saber si el usuario está conectado o no, y también podemos escuchar los eventos «online» y «offline» para detectar cambios en la conectividad. En el Panel de Control de Mango advertimos al usuario cuando se queda sin conexión y avisamos cuando se restablece.

Screen Shot 2015-09-23 at 1.14.18 PM

 

Disponible en Chrome para Android y en más navegadores en un futuro cercano se encuentra la Network Information API. Esta API nos brinda información más detallada sobre el tipo y estado de la conexión. En muchos casos bajo 3G tiene sentido que nuestras apps se comporten más parecido a un estado offline que al escenario de una conexión óptima.

Los caballeros sí tienen memoria

Anteriormente hablamos un poco de los Service Workers y la capacidad de manipular cachés. ¿Qué pasa si utilizamos este poder para guardar los recursos necesarios a la hora de inicializar la app? El resultado son web apps o sitios web que funcionan offline. El caché nos permite guardar todo tipo de recursos que necesitemos más adelante. Si queremos guardar un artículo para ver más tarde, una font o un script, podemos hacerlo. Un ejemplo de ello es la landing page de BAFrontend.

Screen Shot 2015-09-23 at 3.00.50 PM

Más interesante aún, podemos manejar el evento «fetch» desde un Service Worker y decidir por cada request que haga nuestro sitio que decisión tomar. Podemos devolver un recurso de caché, hacer el request a nuestro servidor o incluso devolver un resultado totalmente nuevo basado en información relevante que nos da el navegador.

«Quedate tranquilo/a nosotros te llamamos»

Una gran ventaja que vemos en las apps nativas es la posibilidad de ejecutar tareas en background, sin necesidad de tener la aplicación abierta y las notificaciones push.

Estas funcionalidades llegan a la web a través de la Push y Task Scheduler APIs. Esto nos permite una mayor conciencia y capacidad de respuesta ante eventos que ocurren en momentos donde no necesariamente el usuario interactúa con la app pero que son realmente relevantes y/o que requieren acciones.

Mirando para adelante

Creo que es un buen momento para plantearnos como podemos adaptar nuestras aplicaciones y sitios web a los requerimientos derivados del uso de dispositivos móviles. Los navegadores están sumando características que nos permiten interacciones muy interesantes con usuarios con nuevas necesidades y que intentan eliminar esta dicotomía entre aplicaciones nativas y web para pasar a un contexto de cooperación mutua. Como se suele decir, utilizar «la herramienta correcta para el trabajo», conociendo las fortalezas que tiene la web y sumando estas nuevas APIs que ayudan a hacer nuestro trabajo.

Un tema muy importante que no fue incluído en este artículo pero seguramente lo será en futuras entregas son las técnicas que podemos utilizar para mejorar la performance a la hora de dibujar la UI e interactuar con navegadores en estos dispositivos.

Esta es una entrega de nuestra serie sobre Front End y nuevas tecnologías web, seguí nuestra cuenta de Twitter (@getmango) para conocer nuevos artículos del tema.

Toda duda o sugerencia es bienvenida. Te podés contactar conmigo vía Twitter (@impronunciable).

Los comentarios están cerrados para este artículo.