Hay ocasiones en las que en una página web tenemos que cargar varias librerías Javascript, otras tantas CSS, montones de imágenes, y algún que otro fichero PDF. En estos casos es normal que la carga del site se ralentice más de lo normal, por este motivo hoy vamos a ver como podemos cachear todo esto en la parte del cliente con Google Gears.
Google Gears es un proyecto open source que permite hacer aplicaciones más potentes, añadiendo nuevas funcionalidades a nuestro navegador.
Hoy simplemente vamos a utilizar una de las muchas características de Google Gears el LocalServer.
Vamos a crear la siguiente estructura de ficheros:
– index.html
– cachthis.js
– test.js
– gears_init.js -> esta la descargamos y la ponemos tal cual en el directorio
index.html
cachthis.js
{
"betaProyectoVersion" : 1,
"version" : "0.1",
"entries" : [
{ "url" : "./test.js" }
]}
test.js
function sayHello(){
alert("Hola");
}
Es un ejemplo muy básico pero a la vez muy ilustrativo, una vez tengamos todos los ficheros instalamos Google Gears, y reiniciamos los navegadores.
Si entramos en la página y pulsamos el botón nos mostrará por pantalla un alert diciendo “Hola”, hasta aquí todo normal. En este momento Gears ya tendrá cacheado el fichero test.js, de modo que si volvemos a entrar en esta página, no lo descargará, sino que lo cargará de su caché.
Como lo comprobamos…. Simple, modificamos el fichero test.js y lo dejamos del siguiente modo.
test.js
function sayHello(){
alert("Adiós");
}
Si volvemos a cargar la página y pulsamos el botón el mensaje que nos aparecerá por pantalla será “Hola” en lugar del que realmente contiene el fichero.
Por último si queremos actualizar las versiones cacheadas que tienen nuestros usuarios, solamente tendremos que cambiar la versión del fichero ‘cachthis.js’ a una superior, y automáticamente se recargará.
