02

5

Controla applicationCache en tu web Offline

Tras ver los aspectos básicos de ApplicationCache, que nos permitía guardar el contenido de una aplicación o página web para acceder a ella sin conexión a Internet, ahora veremos como actualizar la caché con JavaScript.
Para ello disponemos del objeto window.applicationCache, que nos permite acceder a la información relacionada con el archivo .appcache y poder actualizar los archivos que se verán offline.

Normalmente esos datos de fuera de conexión quedan guardados si no pasa una de las siguientes condiciones:

• Desde el navegador, el usuario borra los datos de almacenamiento sin conexión.
• Se modifica el archivo del manifiesto (.appcache).
• Mediante JavaScript hacemos que se actualice, como haremos ahora.

Objeto de la API

El objeto que controla la API para cachear archivos y acceder a ellos offline tiene un conjunto pequeño de funciones y puede tener varios estados.

1. //La variable "cache" contendrá el objeto de la API
2. var cache = window.applicationCache

Como he comentado, este objeto puede generar varios eventos, que pueden usarse para funciones más avanzadas como monitorizar que elementos son los que se están guardando en la caché, pero no vamos a entrar tan en profundidad.
Con window.applicationCache.status podemos conocer los estados distintos que puede tener, que van del número 0 al número 5, pero la API tiene unas variables asociadas a estos números para entender mejor que respuesta se usa.
La lista siguiente contiene los estados y su número relacionado, que cotejaríamos con cache.status.

1. //La variable "cache" ya contiene la API
2. //Estas dos líenas en la práctica son iguales:
3. //   cache.status
4. //   window.applicationCache.status
6. cache.UNCACHED // UNCACHED == 0
7. cache.IDLE // IDLE == 1
8. cache.CHECKING // CHECKING == 2
9. cache.DOWNLOADING // DOWNLOADING == 3
10. cache.UPDATEREADY // UPDATEREADY == 4
11. cache.OBSOLETE // OBSOLETE == 5

Esta lista es importante para realizar la actualización de la caché solo cuando sea necesario.

Actualizar la caché

Para actualizar la cache contamos con la función cache.update(), que se encarga de comprobar si se ha modificado o no el manifiesto con la información de la caché y hace que genere la API un evento de la lista anterior.
Si ejecutamos la función y el manifiesto es distinto al que hay almacenado el estado será UPDATEREADY y podremos actualizar el manifiesto con la función cache.swapCache(), que descargará el manifiesto nuevo y los archivos, aunque deberemos de actualizar la página para que los cambios se apliquen.

En el siguiente código haremos una función que se encargue de buscar actualizaciones en el manifiesto y de actualizar la caché.

1. var cache = window.applicationCache
3. function actualizar(){

//Si devuelve un "UPDATEREADY" se ejecuta esta función (tras hacer el update)

cache.addEventListener('updateready', function(event) {

cache.swapCache() //Renovamos la caché

window.location.reload() //Recargamos la página

}, false)

cache.update()

5. }

Con esto y el artículo anterior tenemos todo lo necesario para crear aplicaciones offline, aunque se puede profundizar un poco más pero bajo mi punto de vista es irrelevante si no se va a monitorizar algo en especial lo que se descarga.
Y no hace falta comprobar que todo se descargue bien, ya que si no se descarga por el motivo que sea el manifiesto o alguno de los archivos no se actualizará la caché (se actualizará la siguiente vez).

Resumen

Esta API de HTML5 es uno de los primeros pasos hacia las aplicaciones totalmente multiplataforma, es decir, hacia las aplicaciones web, por eso es muy importante su uso cuando se hacen grandes aplicaciones que requieren de mucho espacio y descargarlas cada vez que se usan sería muy lento.