Inicio > AJAX, HTML5, Mobile Web, Movil, WWW > Aplicaciones Web Offline con el archivo manifest de HTML5 (Offline Application Cache)

Aplicaciones Web Offline con el archivo manifest de HTML5 (Offline Application Cache)

Existe una característica en HTML5  llamada Offline Application Cache que permite a los usuarios correr aplicaciones Web aun y cuando no estén conectados a Internet. Funciona de la siguiente manera:

Cuando un usuario visita una aplicación Web, el navegador descarga y guarda todos los archivos necesarios para desplegar la página (HTML, CSS, javascript, imágenes, etc).

La siguiente vez que el usuario visita la aplicación, el navegador reconoce la dirección y sirve los archivos del cache de la aplicación local, en lugar de obtenerlos por la red.

El principal componente de esta característica se llama archivo de manifiesto (manifest file), que es un archivo de texto que se guarda en el servidor Web. Este archivo se envía al dispositivo del usuario y su tipo mime es cache-manifest.

Este archivo contiene una lista de archivos que el dispositivo del usuario debe descargar y guardar para que funcione la aplicación.

Ejemplo.

Por ejemplo supongamos una página HTML que se usa de splash para correr una aplicación la estructura de archivos sería la siguiente:

index.html

_img/splash.png

_js/index.js

_css/index.css

app.manifest

Los pasos para utilizar esta característica (Offline Application Cache)

1. Crear un cache manifest.

El archivo app.manifest tendrá las referencias a todos los recursos que queremos guardar en el cache de la aplicación:

Contenido de app.manifest:

CACHE MANIFEST
#Cache para la aplicación que no tenga conexión de red
#V1
#Archivos HTML
index.html
#Archivos javascript
_js/index.js
#Archivos CSS
_css/index.css
#Imagenes
_img/splash.png

Las rutas son relativas al archivo (también se pueden usar rutas absolutas), las líneas que comienzan con # son comentarios.

2.  Referenciar el archivo cache.

Para que se tenga acceso offline y funcione la aplicación con los archivos específicos en el archivo se necesita ligarlo, agregando un atributo manifest a la etiqueta de html dentro del index.html.

<html manifest=”app.manifest”>

Se debe configurar el tipo mime correcto (text/cache-manifest) en el servidor Web, porque si no, el navegador no lo va a reconocer.

En apache, el archivo mime.types se encuentra en el fólder /conf/ al final del archivo se escribe:

#HTML5 applicacion cache_offline access

text/cache-manifest manifest

Si no se tiene acceso a esa carpeta entonces se crea un archivo .htaccess en el directorio Web con la siguiente línea:

AddType text/cache-manifest .manifest

Con esto la aplicación debe funcionar correctamente, la segunda  vez que un usuario visite la aplicación, los recursos listados en el archivo se descargaran localmente de su dispositivo. (Móvil o desktop).

Actualizando el archivo.

Cuando el usuario visita el sitio, el navegador compara los archivo manifest (local y remoto) y checa si son iguales, si el archivo remoto cambió, el navegador descarga todos los archivos listados en el.

La comparación del contenido de los archivos se realiza byte por byte (incluyendo comentarios y líneas vacías), el cambio de alguno de los archivos listados en el manifest es irrelevante para determinar si se hizo algún cambio o no.

Hay que tomar en cuenta que cuando se actualiza un archivo, la descarga de los nuevos archivos se hace en el fondo, después de que se cargó la web app. Esto significa que incluso después de descargar los nuevos archivos, el usuario seguirá trabajando con los archivos viejos. Los archivos nuevos que fueron descargados en el fondo, no serán visibles hasta que el usuario vuelva a lanzar la aplicación. (leer mas adelante la solución a esto).

También es posible forzar al navegador a cargar ciertos recursos de la red siempre, por medio de la instrucción NETWORK,  por ejemplo si quisiéramos que una imagen siempre sea solicitada del servidor web, dentro del archivo manifest se declara de la siguiente manera

NETWORK:
imagen.jpg

El problema de esto es que si la aplicación se corre cuando no hay conexión, la imagen se tratara de cargar desde el servidor, para solucionar esto se puede utilizar otra instrucción para especificar que si no existe conexión se cargue un archivo local, y si hay se cargue el archivo desde el servidor.

En lugar de la instrucción NETWORK se utilizaría FALLBACK de la siguiente manera:

FALLBACK
imagen.jpg imagenLocal.jpg

Cuando el usuario tenga conexión la aplicación solicitará al servidor imagen.jpg y cuando no tenga usará la imagen del cache (imagenLocal.jpg).
También se puede especificar una sola imagen para mostrar cuando la aplicación este sin conexión, en lugar de todas las imágenes que se muestran en la aplicación.

FALLBACK
_img/ _img/imagenLocal.jpg

Objeto applicationCache.

Como ya expliqué, cuando un usuario visita una página que tiene un archivo manifest, el navegador trata de comparar o actualizar el cache, lo hace comparando los archivos (local y del servidor). Si los archivos son diferentes, se descargan los recursos y se almacenan de nuevo.

Mientras esto pasa, 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.

API.

cache = window.applicationCache

Regresa un objeto ApplicationCache del documento activo de la ventana.

cache.status

Regresa el código de estatus actual del objeto con las siguientes constantes:

0 : uncached

1 : idle

2 : checking

3 : downloading

4 : updateready

5 : obsolete

cache.update()

Invoca el proceso de descarga de cache, arroja una excepción  de tipo INVALID_STATE_ERR en caso de que no exista cache para actualizar.

cache.swapCache()

Cambia el cache mas reciente en caso de que exista uno, si no, arroja una excepción de tipo  INVALID_STATE_ERR

Ejemplo.

Para actualizar la aplicación con los archivos nuevos sin recargar la aplicación:

Window.applicationCache.addEventListener(‘updateready’, function(){
Window.applicationCache.swapCache();}, false);

Esta característica es muy importante para el futuro de las aplicaciones Web móviles, el limite en iphone al parecer es de 5mb, en los demás dispositivos (Android, blackBerry, Palm) aun no lo he encontrado.

  1. Carlos
    noviembre 11, 2010 a las 11:15 am

    Buen día Juan, quiziera saber si puedes ayudarme, en que archivo tengo que meter las líneas de
    Window.applicationCache.addEventListener(‘updateready’, function(){
    Window.applicationCache.swapCache();}, false);

    para que mi WebApp se actualize si hay algo nuevo?

  2. noviembre 11, 2010 a las 12:17 pm

    Hola Carlos, el window.applicationCache es un objeto de javascript por lo que la programación te recomiendo la guardes en un archivo con extensión .js y escribas la referencia en el archivo html por medio del tag script.

    Como nota adicional, el objeto no busca si hay algo nuevo en el archivo, lo que hace es propocionarte información acerca de lo que esta pasando con el archivo manifest.
    En caso de que un archivo manifest cambie y se actualice cuando el usuario visita la aplicación, para ver estos cambios el usuario tendría que reelanzar la aplicación, con este objeto tu puedes detectar si se esta actualizando el archivo y de esta manera cuando termine de actualizarse, con el metodo swapCache() actualizar los archivos.

    El metodo update() sirve para forzar al navegador a que cheque si hay una actualización del archivo.

  3. xander
    diciembre 29, 2010 a las 3:53 pm

    mira he realizado este archivo con jquery, sin el manifest=”boxsys.manifest”, el archivo me funciona ok, pero con manifest=”boxsys.manifest” no aparecen nada de graficos ni jpg,png. solo me funciona en firefox, en opera chrome, safari nada de nada, en el .htaccess tiene esto
    AddType text/cache-manifest .manifest y en otros archivos(index.php,boxsys.manifest) lo siguientes.
    ****** index.php ****

    Sistema Boxsys

    $(document).ready(
    function()
    { $(‘#dock2’).Fisheye(
    { maxWidth: 60,
    items: ‘a’,
    itemsText: ‘span’,
    container: ‘.dock-container2’,
    itemWidth: 40,
    proximity: 80,
    alignment : ‘left’,
    valign: ‘bottom’,
    halign : ‘center’
    }
    )
    }
    );

    function updateCache()
    { window.applicationCache.update();
    window.applicationCache.swapCache();
    }
    $(window.applicationCache).bind(‘updateready’, updateCache);

    Boxsys

    Portfolio
    Music
    Video
    History
    Calendar
    Links
    Chat
    RSS2
    Administrador

    ****** boxsys.manifest ****

    CACHE MANIFEST
    #Version 1.0.1
    #_caja/index.php
    CACHE:
    css/grid.css
    css/AeroWindow.css
    css/menu_index.css
    css/menu.css
    #FALLBACK:
    img/ img/imagenLocal.jpg
    js/jquery-ui-1.8.2.custom.min.js
    js/jquery.js
    js/interface.js
    js/coolclock.js
    js/jquery-1.4.2.min.js

    estoy tratando de poner en mi web http://www.boxsys.pe

  4. enero 4, 2011 a las 9:50 pm

    No comprendo muy bien el sentido de porque pusiste en la parte del fallback :

    js/jquery-ui-1.8.2.custom.min.js
    js/jquery.js
    js/interface.js
    js/coolclock.js
    js/jquery-1.4.2.min.js

    checando la pagina en los navegadores que mencionas puedo ver las imagenes, supongo que ya lo arreglaste saludos

  5. julio 19, 2011 a las 8:12 pm

    hola Juan mira mi pregunta es si el cache me puede servir para cargar una pagina que hice en html5 que es muy pesada y esta cargando muy lento.

    Quiero saber si aplicar appcache me serviria para que cargue mas rápido. gracias

    Gracias

  6. Octavio
    diciembre 21, 2012 a las 7:00 am

    Gracias por la información. Es lo mas claro que he encontrado sobre el tema y me sirvió mucho.

  1. No trackbacks yet.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

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

A %d blogueros les gusta esto: