Contenido

Aplicaciones web offline, para que la conexión no sea problema

9 Ene

+ 2

Las aplicaciones web, como su nombre indican son aplicaciones ligadas a la Web, eso significa que necesitaremos una conexión a Internet para poder acceder a ellas.

Ya hace unos años Google se adelantó a esta necesidad ofreciendo Google Gears como solución a este problema, esencialmente se componía de ofrecer la posibilidad de usar una base de datos local (usando SQLite) y un almacenaje de HTML/JS/CSS en local permitiendo que nuestras aplicaciones pudieran trabajar en modo offline.

Se crearon una gran cantidad de utilidades que aprovechaban estas nuevas características de las aplicaciones web. Pero no era oro todo lo que relucía, esta maravilla requería una instalación por parte del usuario para poder disfrutar de ellas, igual que para disfrutar de aplicaciones Flash.

HTML5 introduce el almacenamiento DOM, algo de lo que ya hemos hablado en infinidad de ocasiones, y es que estas cookies avanzadas nos dan mucho juego y al depender del navegador nos ahorra tener que hacer que el usuario haya de actualizar nada, simplemente el navegador (algo que generalmente se hace automáticamente).

Mozilla Hacks desarrolla una aplicación a modo de demostración que nos permite disponer de una lista de tareas alojada en nuestro navegador, podéis verla aquí.

Cacheamos datos

Para cachear nuestros datos tenemos una serie de métodos DOM que ya hemos visto anteriormente.

function sendLocalStatus() {
	// Leemos el estado en local
  	var status = readStatus();

	// Si hay estados
  	if (status) {
		// Lo enviamos al server online
    	sendToServer(status);

		// Borramos la copia local
    	window.localStorage.removeItem("status");
  	}
}

// Evento onload
window.addEventListener("load", function() {
	// Comprobamos que estemos online
   	if (navigator.onLine) {
		// Si lo estamos enviamos datos de local
		// así actualizamos los cambios hechos offline
		// en nuestro servidor online
     	sendLocalStatus();
   	}
}, true);

// Evento online
window.addEventListener("online", function() {
	// Evento que se activa cuando detecta que estamos online
  	sendLocalStatus();
}, true);

// Evento offline
window.addEventListener("offline", function() {
	// Evento que detecta cuando perdemos la conexión
  	alert("You're now offline. If you update your status, it will be sent when you go back online");
}, true);

Como podemos ver, el navegador nos ofrece una serie de eventos que nos permiten controlar el estado de nuestra conexión, de esta forma, podemos enviar los datos modificados cuando estamos desconectados para ser enviados a nuestros servidores al recuperar la conexión.

Cacheando ficheros

Por otro lado, tenemos los ficheros HTML/CSS/JS que debemos cachear para que nuestra aplicación funcione en modo offline. Para ello, usamos un fichero Manifest que indica que ficheros deben ser cacheados:

// HTML
<html manifest="offline.manifest">

// offline.manifest
CACHE MANIFEST
fonts/MarketingScript.ttf
css/main.css
css/fonts.css
img/face.gif
js/main.js
index.xhtml

En resumen, una serie de herramientas muy útiles para enriquecer cualquier aplicación web. Por que la conexión no debería ser una limitación 😀

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.