Escrito por Ramón Saquete
Índice
Estamos acostumbrados a pensar en las webs como un medio online, para el que es necesario estar conectado a internet si queremos utilizarlo. Sin embargo, desde que la Web empezó a volverse más mobile, también apareció la necesidad de tener aplicaciones Web que se puedan utilizar offline.
En un dispositivo móvil no siempre vamos a tener cobertura ya que puede ser que estemos volando en un avión, puede que estemos en el extranjero y no queramos conectarnos por las elevadas tarifas, puede que no tengamos tarifa de datos, o como pasa en muchas tablets y portátiles, puede que sólo tengamos WiFi y no tengamos ninguna cerca.
Desde que las Webs se han empezado a trasladar al mundo de los dispositivos móviles, las tecnologías que permiten utilizar las Webs en modo desconectado, no han dejado de evolucionar
Una Web que pueda funcionar offline, podría tener todos o casi todos sus contenidos disponibles offline y cualquier aplicación o servicio que ofrezca, como un buscador o un editor de texto. Por supuesto, hay funcionalidades, como comprar en una tienda virtual, en dónde habrá que esperar a estar online para formalizar el pedido, sin embargo, eso no quita que mientras se haya estado offline, se haya ganado tiempo llenando el carrito de la compra, aunque tengamos que esperar a tener cobertura, para saber si todo lo que queremos está disponible.
Antiguamente para almacenar información en el cliente lo podíamos hacer mediante cookies, que no permiten guardar demasiada información (20 cookies de 4KiB en total) y se envían con cada petición y respuesta. Otra forma de conseguirlo era con los plugins de Flash y Java, para lo cual necesitabas tener instalado el plugin. También existían características no estándar en algunos navegadores para el almacenamiento local. Sin embargo, actualmente existen muchas tecnologías adicionales, que son estándar y no tienen esos problemas, que realmente permiten implementar aplicaciones Web offline, principalmente, me estoy refiriendo a Web Storage, Indexed DB y Application Cache.
A continuación voy hacer un resumen de las distintos tipos de almacenamiento que podemos usar en el cliente con JavaScript. Cada uno está enfocado a lograr distintos objetivos y tiene distinta capacidad máxima de almacenamiento, cuyo límite viene definido de forma diferente en cada navegador y, por supuesto, por el espacio libre que tenga el cliente.
Web Storage
También llamada Dom Storage, se divide en Local Storage, para almacenamiento persistente, y Session Storage, para guardar objetos que expiren al cerrar el navegador. Con esta API podemos almacenar datos tipo clave/valor, donde el valor puede ser un objeto JSON. Esta API es compatible actualmente con todos los navegadores, incluso con IE8. Puesto que es la opción más compatible, es la más extendida y utilizada, cuando lo que queremos es almacenar grandes bloques de datos, en los que pueda estar interesado el usuario o que hayan sido generados por éste.
Application Cache
Esta es la única especificación que permite tener aplicaciones Web totalmente offline. Cachea las páginas mediante la inclusión de un archivo en el HTML que indica los archivos a cachear. Es parecido a la caché del navegador, con la diferencia de que ésta sólo se borra por orden explícita del usuario o la aplicación. También cuenta con una API de JavaScript mediante el objeto applicationCache, que sirve para comprobar el estado de la Caché, además de eventos específicos de la misma.
Está especificación nos da muchos dolores de cabeza a los programadores para lograr que la caché se comporte como nosotros queramos, tanto es así, que se ha propuesto una especificación alternativa llamada ServiceWorker. Sin embargo, la Application Cache está soportada por todos los navegadores y en Internet Explorer a partir de la versión 10.
Eventos offline y online
Esto no es un tipo de almacenamiento, pero es una característica, muy importante, para poder implementar aplicaciones offline, ya que cuando pasamos de estar online a offline, todas las acciones que haga el usuario, que se sólo puedan realizarse contra el servidor, deberían guardarse en una cola, para después ser ejecutadas cuando vuelva a estar online. Al pasar a online, también se deben sincronizar los datos que hayan quedado obsoletos de la aplicación.
Para poder controlar estas situaciones, tenemos una nueva propiedad llamada navigation.online, que será true si estamos online y false si no. Cuando el estado de esta propiedad cambia, se dispara el evento online o el evento offline.
Indexed Database
Indexa objetos JSON que pueden ser escritos y leídos rápidamente. Permite recorrer los datos rápidamente mediante cursores, de forma que podemos consultar los datos mucho más rápido que con Web Storage. Otra ventaja que tiene, respecto a dicha API, es que soporta transacciones. Aunque ha tardado más en implementarse en los navegadores que Web Storage, actualmente esta API es compatible con todos los navegadores de escritorio y móvil, con IE está soportado sólo a partir de la versión 10 y de forma parcial.
FileSystem API
Ésta tecnología todavía no está estandarizada y sólo se puede usar desde Chrome. Si se llega a estandarizar, permitirá almacenar archivos dentro del sistema de ficheros del cliente y enlazarlos después.
Web SQL Database
Su especificación fue desaprobada y aunque muchos navegadores son compatibles, no la usa ni Firefox, ni Internet Explorer. En principio iba a permitir tener una base de datos SQLite en el cliente y lanzar consultas contra ella con JavaScript, pero se abandonó su especificación en favor de la solución NoSQL, de la que ya hemos hablado, IndexedDB. Esto fue debido al sobrecoste que tenia programar usando SQL en un lenguaje OO como JavaScript y a que IndexedDB es más rápido. Yo personalmente, no estoy de acuerdo con el abandono de esta tecnología, ya que era la única que permitía almacenar datos estructurados.
Con esto termina este análisis de tecnologías offline, ¿qué os parece? ¿Creéis que merece la pena para el usuario poder usar determinas webs offline?
