Metodo Aplication Cache de HTML5

¿Para qué sirve Aplication Cache?, Muy sencillo!
Trabajar sin conexión en una web. ¿Qué ventajas tiene eso?
…Pues según la W3c:

  • Offline Browsing: Puedes explorar un sitio web por completo estando offline.
  • Speed: Puedes almacenar todos los archivos de una web en local, ésto se traduce en que con éste método logramos que carguen en un “periquete”.
  •  Reduce server load: gracias al archivo de “manifiesto de caché” el servidor solo te envía los archivos que no tengas actualizados en tu caché, con lo que el servidor tampoco sufre con exceso de envio de archivos, ¡Que aúnque no lo parezca, el Server también tiene sus sentimientos!

mhh… Muy interesanta, pero ¿me puedes explicar un poco mejor qué es eso de un archivo de “manifiesto de caché”?

Pues claro, alma de cántaro! Básicamente mediante éste método, el desarrollador puede especificar al navegador los archivos concretos que quiere que el navegador almacene en caché, para que los usuarios puedan trabajar sin conexión, de este modo, hasta que el desarrollador no especifique nuevos archivos en el llamado archivo de “manifiesto de caché” tu navegador seguirá mostrando lo que tenía previamente cacheado para el acceso sin conexión.

Entremos en Combate!

Lo Primero es incluir el atributo manifiesto

Toda página con el atributo manifiesto especificado se almacena en caché cuando el usuario visita. Si éste no se especifica, la página no se almacena en caché (a menos que se especifique directamente esa página en el archivo de manifiesto ).

La extensión recomendada para el archivo manifiesto es: “.appcache”.

El tipo MIME con el que se deben mostrar los archivos de manifiesto es text/cache-manifest. Es posible que tengas que añadir un tipo de archivo personalizado a la configuración de .htaccess o de tu servidor web.

Por ejemplo, para mostrar este tipo MIME en Apache, añade la siguiente línea a tu archivo de configuración:

El archivo manifiesto contiene tres secciones:

  • CACHE MANIFEST – Los archivos listados con éste parámero serán cacheados despues de que se descarguen por primera vez.

La primera línea ‘CACHE MANIFEST’ es obligatoria

En éste caso el navegador descargará un archivo de estilos (CSS), una imagen GIF y un archivo JS, que estrán disponibles cuando el usuario entre en modo offline.

  • NETWORK – Los archivos listados bajo éste parámetro requieren una conexión con el servidor y nunca serán cacheados.

En este caso especificamos que el archivo login.asp jamas ha de ser cacheado.

También podríamos usar un asterisco para indicar que todos los archivos requieren conexióna internet.

  • FALLBACK – Los archivos listados bajo este parámetro especifican una página adjunta en el caso de que la página no esté accesible.

En el siguiente ejemplo especificamos que el archivo “offline.html” será suplantado por todos los archivos del catálogo HTML en caso de que la conexión con el servidor no se pueda establecer.

-el primer tag representa el recurso y el segundo es el fallback-

Actualizando la caché.

Una vez la aplicación es cacheada, se mantendrá disponible en caché hasta que suceda alguna de las siguiente situaciones:

  1. El usuario limpia la caché del navegador.
  2. El ‘archivo manifiesto’ es modificado/actualizado. (ver siguiente punto)
  3. La actualización del caché de la aplicación está programada.

Ejemplo completo – archivo de manifiesto de caché:

Trucos del almendruco:

  • Las líneas que empiezan por # son lineas de comentarios.
  • La caché de una aplicación solo es actualizada cuando su archivo manifiesto cambia.
  • Si por ejemplo cambias imágenes o archivos Javascript, estos archivos no se actualizarán en la caché si no lo reflejas en el archivo manifiesto.
  • Una buena praxis para mantener tu archivo manifiesto actualizado, es reflejar en un comentario la versión y fecha de los cambios que realizas.

Para finalizar, quiero remarcar que hay que tener mucho cuidado con aquello que cacheas, ya que aunque lo actualizes en tu servidor, si no actualizas el archivo manifiesto, tu navegador seguira mostrando lo que mantiene cacheado.

Y con ésto último finalizo mis dos capítulos sobre técnicas para guardar datos de tu web en el navegador, con éste artículo y junto al que anteriormente escribí sobre localStorage/sessionStorage, para ambos artículos me he basado en los recursos libres de la w3c.

Salud!