Application caching: Actualizar el appcache

Application caching: El archivo de manifiesto
Application caching: Actualizar el appcache

Si quieres actualizar el appcache de un usuario, cambiar un archivo no será suficiente. El navegador comprueba actualizaciones de los archivos en el appcache del usuario si el archivo de manifiesto cambia.

Cambiar el archivo de manifiesto no quiere decir tener que agregar otra página al cache o cambiar el nombre de un archivo. Bastará con cambiar un comentario del archivo.

Voy a usar el ejemplo del post anterior. En él estaba escrito un comentario con la versión de la cache. Cambiando solamente esa línea será más que suficiente para que el navegador actualice el appcache.

CACHE MANIFEST
# 2017-04-21:v1 -> Cambia esta línea por ejemplo: # 2017-05-03:v2

# Recursos en caché 
CACHE:
img/favicon.ico
index.html
css/estilos.css
img/logo.png
scripts/main.js

CACHE MANIFEST

# 2017-04-21:v1 -> Cambia esta línea por ejemplo: # 2017-05-03:v2

# Recursos en caché

CACHE:

img/favicon.ico

index.html

css/estilos.css

img/logo.png

scripts/main.js

Cada vez que quieras actualizar el appcache, simplemente llega con aumentar el número de la versión. De esta manera, cada vez que el usuario cargue la página, el navegador verá que hay un nuevo manifiesto actualizando el contenido de la appcache.

Forzar la descarga del contenido nuevo

Sin embargo, a pesar de que el manifiesto cambie, el navegador seguirá cargando el contenido del appcache anterior. El contenido nuevo se cambiará en la próxima carga de la página.

Se puede forzar la descarga mediante JavaScript con applicationCache. Con esta interface se puede detectar si el contenido a buscar está disponible y forzar la descargar del nuevo appcache inmediatamente en vez de esperar a la próxima carga.

var cache = applicationCache;
cache.addEventListener("updateready", function(){
    if (cache.stats == cache.UPDATEREADY) {
        cache.swapCache(); 
    }
}, false);

var cache = applicationCache;

cache.addEventListener("updateready", function(){

if (cache.stats == cache.UPDATEREADY) {

cache.swapCache();

}

}, false);

Existe la posibilidad de forzar al navegador para comprobar actualizaciones en el manifiesto.

var cache = applicationCache;
cache.update();

1 2	var cache = applicationCache; cache.update();

Persistencia de appcache

Una de las cosas a tener en cuenta, es que el appcache nunca caduca. Esto recuerda al localStorage el cuál ya hablé en otro post.

Los recursos al estar cacheados permanentemente, no es preciso hacer ninguna petición al servidor por cada carga de una página.

La cache al persistente, mejora el rendimiento de la vistas de las páginas sobretodo en anchos de banda limitados como podrían ser en smartphones. Sin embargo, es posible que haya que actualizar uno o más elementos en el cache.

A pesar de todo, se recomienda usarlo de manera cautelosa. Esto quiere decir que no se emplee para todas las páginas, el appcache está más enfocado a las aplicaciones offline.

Y hasta aquí cómo actualizar el appcache. Si estáis desarrollando una aplicación web espero que os sirva de ayuda. A seguir picando 🙂