Aplicaciones offline en HTML5

Lee una página web offline siempre había sido posible. Descargabas la página y las hojas de estilos y listo, ya podías ojearla. Pero ¿y las aplicaciones? Eso ya era otra cosa, ahí ya estabas limitado.

HTML5 llega con la posibilidad de la creación de aplicaciones offline. Imaginemos que hemos puesto un juego creado en una etiqueta canvas con javascript (uno mismamente como CanvasRider), y queremos que el usuario pueda usarla aunque no esté conectado. Lo que tenemos que hacer es crear un archivo app.manifest listando los archivos que tienen que descargarse. Algo así:

#Cache para la aplicación offline
#HTML
index.html
#Javascript
_js/aplicacion.js
#CSS
_css/aplicacion.css
#Imágenes
_img/imagen1.png
_img/imagen2.png
_img/imagen3.png
_img/animacion.gif

Una vez hecho el archivo .manifest hay que enlazarlo con la web. Lo primero es meterlo como atributo en la etiqueta html del archivo hmtl principal:

<html manifest = "app.manifest" >

Se debe configurar el tipo MIME correcto en el servidor para que reconozca bien el archivo. Si usas Apache en la carpeta /conf/ encontrarás la carpeta mime.types, debes añadir al final:

#HTML5 applicacion cache_offline access
text/cache-manifest manifest

Si por lo que sea no puedes acceder a este archivo (tal vez porque tu empresa de hosting no te lo permita), puedes crear un archivo .htaccess en la carpeta web con este texto:

AddType text/cache-manifest .manifest

Cuando el usuario visita el sitio, el navegador compara los archivo manifest (local y remoto) y comprueba si son iguales. Si el archivo remoto cambió el navegador descarga todos los archivos listados en él. Es posible forzar al navegador a cargar determinados recursos siempre de la red, por medio de la instrucción NETWORK. Por ejemplo, si quisiéramos que una imagen siempre sea cargada desde el servidor, dentro del archivo manifest habría que declararlo así:

NETWORK:
imagen1.png

El problema de hacer esto es que si la aplicación se utiliza offline la imagen se tratará de cargar desde el servidor. Para solucionar esto se puede utilizar otra instrucción que especifica que si no existe conexión se cargue un archivo local, y si la hay se cargue el archivo desde el servidor. Este es la instrucción FALLBACK:

FALLBACK
imagen1.png imagen1Local.png

Y no sólo esto, sino que también podemos especificar que en caso de que estemos sin conexión se muestre la misma imágen para todas las imágenes de la página, tal que así:

FALLBACK
_img/ _img/imagen1Local.png

Mientras los archivos manifest se comparan y se descargan los nuevos archivos varios eventos se disparan en un objeto llamado ApplicationCache. Con este objeto, por ejemplo, podemos actualizar al usuario con los nuevos archivos descargados sin necesidad de volver a lanzar la aplicación.

El objeto window.applicationCache tiene varios métodos, pero los más destacados y útiles son:

  • cache.status: Nos muestra el estado de la app mediante una serie de constantes.
    • 0 = uncached
    • 1 = idle
    • 2 = checking
    • 3 = downloading
    • 4 = updateready
    • 5 = obsolete
  • cache.update(): Llama al proceso de descarga de cache. Lanza una excepción INVALID_STATE_ERR en caso de que no exista cache que actualizar.
  • cache.swapCache(): Cambia la cache mas reciente en caso de que exista uno, si no, arroja una excepción de tipo INVALID_STATE_ERR

Un pequeño ejemplo de cómo lograr actualizar la aplicación con los archivos nuevos sin recargarla:

cache = window.applicationCache;
cache.addEventListener('updateready',function{
    cache.swapCache();
},false);
Anuncios

Un comentario en “Aplicaciones offline en HTML5

  1. Karla Hernandez

    Hola, que tal? Me preguntaba si es que se puede hacer referencia a una carpeta completa o a un tipo de extensión en el archivo .manifest. Muchas gracias por tu aporte XD

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s