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.
Juan Anzaldo 
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?
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.
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
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
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
Gracias por la información. Es lo mas claro que he encontrado sobre el tema y me sirvió mucho.
Si tengo unas 9 paginas.html en todas tengo que poner
o solo en el index.html