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.xhtmlEn 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 😀
1 comentarios, 1 referencias
+
#