Sigo con el desarrollo de mi aplicación para iPad y el siguiente muro con el que me he topado ha sido el tema de cachear las imágenes. Mi aplicación accede a muchas imágenes que están en Internet y por tanto el consumo de ancho de banda es considerable. Lo que quería es que una vez que se accediera a la imagen, está se almacenara en cache y no se tuviera que volver a pedir.
Después de mucha investigación y muchas pruebas, he dado con dos soluciones: una para cuando el número de imágenes a almacenar no es muy grande (este no es mi caso) y otra que de momento promete guardar todas la imágenes que quiera.
LocalStorage, Web DB SQL y Canvas
La primera solución consiste en utilizar una combinación de localStorage y Web DB SQL para almacenar las imágenes y Canvas para obtener la versión base64 de la misma.
Lo primero que necesitamos por tanto es una función a la que le pasamos una URL de una imagen y nos devuelve una representación en base64 de la misma:
function getImgBase64(imagen, callback) {
var img = document.createElement('img'),
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
img.src = imagen;
img.addEventListener('load', function() {
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this, 0, 0);
callback(canvas.toDataURL('image'));
}, false);
}
Ahora que tenemos la representación de la imagen en base64 necesitamos almacenarla de manera persistente, para ello tenemos localStorage y Web DB SQL. Toca enfrentarse a los límites de tamaño, localStorage permite almacenar 5M y Web DB SQL permite 50M que los puedes repartir en unos 10 BBDD de 5M sin tener que preguntar al usuario si quiere permitir crear una BBDD de tamaño mayor. Cuando estos límites se alcanzan se deja de guardar información.
Si tenemos claro que las imágenes que queremos guardar van a ocupar menos de 5M usaremos localStorage, si es mayor que 5M e inferior a 50M usaremos una combinación de ambas, para minimizar el acceso al Web DB SQL ya que a parte de ser asincrono tiene un retardo, menor que si accediéramos a Internet, pero un retardo que puede quitar fluidez a la aplicación.
La función que almacena en el localStorage sería la siguiente:
function setImg(ref, img) {
getImgBase64(img, function(base64) {
var imagenes = localStorage.imagenes && JSON.parse(localStorage.imagenes) || [];
imagenes[ref] = base64;
localStorage.imagenes = JSON.stringify(imagenes);
});
}
Para obtener la imagen del localStorage:
function getImg(ref) {
var imagenes = localStorage.imagenes && JSON.parse(localStorage.imagenes) || [];
return imagenes[ref] || '';
}
La función completa que se encarga de hacer una pre-carga de las imágenes quedaría de la siguiente manera:
function preLoadImg(ref, img) {
var imagen = new Image(),
data = getImg(ref);
imagen.addEventListener('load', function() {
// Acciones una vez que tenemos cargada la imagen.
}, false);
if (data === '') {
imagen.src = img;
setImg(ref, img);
}
else {
imagen.src = data;
}
}
Para la versión mixta entre localStorage y Web DB SQL, lo que vamos a hacer es almacenar las referencias y estado en localStorage y la imagen codificada en base64 en el Web DB SQL.
Primero vamos a definir qué es lo que guardamos en el localStorage: las referencias a las imágenes que tenemos guardas en Web DB SQL y el número y el tamaño que llevamos en la BBDD actual.
Al empezar, las referencias serán un array vacío y el número y el tamaño serán 0.
Para inicializar la variables y crear la BBDD haremos una función de inicialización:
var DB = [];
function init() {
var referencias = localStorage.referencias && JSON.parse(localStorage.referencias) || [],
actual = localStorage.actual && JSON.parse(localStorage.actual) || {n: 0, t:0},
DBI;
for (var i = 0; i <= actual.n; i+=1) {
DBI = openDatabase('Imagenes_' + i, '1.0', 'Imagenes ' + i, 4.9 * 1024 * 1024);
DBI.transaction(function(t) {
t.executeSql('CREATE TABLE IF NOT EXISTS Imagenes(ref TEXT NOT NULL, img TEXT NOT NULL, PRIMARY KEY(ref))', []);
});
DB.push(DBI);
}
}
En la función de inicialización, la primera vez que se inicia se crea la BBDD Imagenes_0 y las demás veces se abren las BBDD que llevemos usadas hasta el momento.
La función que guarda una imagen en BBDD es algo más complicada que su versión únicamente con localStorage ya que tenemos que tener en cuenta el tamaño que llevamos en la BBDD actual y la creación de una nueva BBDD en caso de que sea necesario.
Como podemos ver defino una variable global DB donde voy a ir almacenando las conexiones a las distintas BBDD.
function setImgDB(ref, img) {
getImgBase64(img, function(base64) {
var actual = localStorage.actual && JSON.parse(localStorage.actual) || {n: 0; t: 0},
referencias = localStorage.referencias && JSON.parse(localStorage.referencias) || [];
if (actual.t >= 1810000) {
actual.n += 1;
actual.t = base64.length;
referencias[ref] = actual.n;
localStorage.actual = JSON.stringify(actual);
localStorage.referencias = JSON.stringify(refrencias);
DBI = openDatabase('Imagenes_' + actual.n , '1.0', 'Imagenes ' + actual.n, 4.9 * 1024 * 1024);
DBI.transaction(function(t) {
t.executeSql('CREATE TABLE IF NOT EXISTS Imagenes(ref TEXT NOT NULL, img TEXT NOT NULL, PRIMARY KEY(ref))', [], function(t, r) {
t.executeSql('REPLACE INTO Imagenes(ref, img) VALUES(?, ?)', [ref, base64], function(t, r) {
console.log('Insertamos la imagen: ' + ref + ' en BBDD ' + actual.n);
});
});
});
DB.push(DBI);
}
else {
actual.t += base64.length;
referencias[ref] = actual.n;
localStorage.actual = JSON.stringify(actual);
localStorage.referencias = JSON.stringify(refrencias);
DB[actual.n].transaction(function(t) {
t.executeSql('REPLACE INTO Imagenes(ref, img) VALUES(?, ?)', [ref, base64], function(t, r) {
console.log('Insertamos la imagen: ' + ref + ' en BBDD ' + actual.n);
});
});
}
});
}
El número 1810000 es el tamaño máximo aproximado de imágenes que se pueden almacenar, es un tamaño totalmente empirico y que se podría afinar un poco más.
Ahora necesitamos la función para obtener una imagen de la BBDD:
function getImgDB(ref, callback) {
var referencias = localStorage.referencias && JSON.parse(localStorage.referencias) || [],
n = referencias[ref] || -1;
if (n !== -1) {
DB[n].transaction(function(t) {
t.executeSql('SELECT img FROM Imagenes WHERE ref = ?', [ref], function(t, r) {
if (r.rows.length > 0) {
callback(r.rows.item(0).img);
}
else {
callback('');
}
});
});
}
else {
callback('');
}
}
Y ahora la función de pre-carga de imágenes:
function preLoadImg(ref, img) {
var imagen = new Image();
getImgDB(ref, function(data) {
if (data === '') {
imagen.src = img;
setImgDB(ref, img);
}
else {
imagen.src = data;
}
});
imagen.addEventListener('load', function() {
// Acciones una vez que tenemos cargada la imagen.
}, false);
}
Como he dicho antes, estás dos soluciones son para un número pequeño y controlado de imágenes.
En el siguiente apartado veremos cómo hacerlo cuando no sabemos el número de imágenes a cachear.
API de Phonegap
En está solución necesitamos acceder al dispositivo, por lo tanto necesitamos una API que nos proporcione acceso al mismo, en este caso yo he escogido Phonegap. A parte de la API de Phonegap, necesitamos un Plugin que nos permite descargar ficheros a nuestro dispositivo.
No voy a meterme en cómo se instala el Phonegap ni el plugin, voy a suponer que ya está todo hecho y vamos directamente al código.
Primero una función de inicialización, necesaria para usar las API's de Phonegap
var fileSystem = {};
function init() {
document.addEventListener("deviceready", function() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
fileSystem = fs;
},
function() {
console.log('Error de inicialización');
});
}, false);
}
Ahora la función para almacenar una imagen en el dispositivo:
function setImgFile(ref, img) {
var ext = img.split('.')[3],
fullPath = fileSystem.root.fullPath + '/',
prev = 'file://' + fullPath + ref + '.' + ext,
image = new Image();
image.addEventListener('error', function() {
var downloader = new Downloader();
downloader.downloadFile(
img,
fullPath,
ref + '.' + ext,
function(file) {
console.log(file);
},
function() {
console.log('Error al subir la imagen');
});
}, false);
image.src = prev;
}
Para la función anterior, suponemos que la imagen está ya en nuestro dispositivo, y por tanto le asignamos el path que suponemos que tiene, en caso de error es cuando nos la bajamos al dispositivo, con esto hacemos que sea más rápida la búsqueda de una imagen y no tenemos que acceder al sistema de archivos que es mucho más lento.
Con esta solución no nos hace falta una función para obtener la imagen ya que las imagenes se guardan en el dispositivo en una ubicación conocida, por tanto vamos con la función de pre-carga de imagenes que usará el mismo principio de suponer que la imagen ya está en nuestro dispositivo antes de pedirla a Internet.
function preLoadImg(ref, img) {
var ext = img.split('.')[3],
fullPath = fileSystem.root.fullPath + '/',
prev = 'file://' + fullPath + ref + '.' + ext,
image = new Image();
image.addEventListener('load', function() {
// Acciones una vez que tenemos cargada la imagen.
}, false);
image.addEventListener('error', function() {
this.src = img;
}, false);
image.src = prev;
}
Conclusión
Está claro que cuanto menos ancho de banda consuma una aplicación y cuanto más rápida sea en mostrar el contenido al usuario, éste se va a sentir más satisfecho y valorará mejor nuestra aplicación, por tanto debemos de ser cautos a la hora de cachear de manera que no se vea afectado el rendimiento de la aplicación por el acceso y la actualización de la misma.
Quiero destacar que las dos primeras soluciones son perfectamente válidas para una aplicación WEB, la segunda al depender del dispositivo solo servirá para dispositivos móviles, en este caso iPad y iPhone.
Referencias
http://stackoverflow.com/questions/934012/get-image-data-in-javascript
http://docs.phonegap.com/en/1.2.0/phonegap_file_file.md.html#File
https://github.com/aflx/pg_downloader_plugin_ios
