El desarrollo de una app híbrida tiene ciertas peculiaridades, en comparación con el desarrollo web. Una de ellas es que es habitual descargarse archivos (ya sea imágenes, pdf, o de otro tipo) físicamente al dispositivo, para acceder posteriormente desde la propia aplicación.

Cordova/Phonegap dispone de dos plugins relacionados con esta tarea.

• El plugin file que permite el acceso al sistema de ficheros (leer, escribir, …)
• El plugin file-transfer que facilita la subida y descarga de archivos.

El primer plugin (sistema de archivos), es imprescindible para estas tareas. No obstante el plugin file-transfer no es del todo necesario, y podemos consegir descargar archivos directamente desde javascript sin necesidad de complicarnos la vida con plugins, que -el que lleva tiempo en esto lo sabe- siempre implican un cierto riesgo de mantenimiento.

¿Como hacerlo entonces? La solución para descargar archivos en aplicación híbrida si trabajas con AngularJS (Ionic, por ejemplo), se llama downgularJS.

DowngularJS

DowngularJS es un módulo de AngularJS en el que he estado trabajando en los últimos tiempos, y que está disponible de forma Open Source en Github: https://github.com/kaikcreator/downgularJS

¿Cómo funciona?

Básicamente hay que:

1. Importar el archivo dist/downgular.js en el index.html
2. Inyectar el módulo downgularJS donde queramos utilizarlo
3. Inyectar el servicio downgularQueue en el servicio o controlador donde queramos utilizar downgularJS.

Hecho esto podemos:

1. Crear colas de descargas:

   var miCola = downgularQueue.build(‘nombreDeLaCola’, ‘directorio’, callback);

   • nombreDeLaCola nos permite identificar la cola en caso de tener varias
   • directorio es una carpeta que se abrirá/creará a partir del origen de sistema de directorios accesible por la aplicación.
   • callback es una función que se ejecuta cada vez que un archivo es descargado, donde podemos hacer cualquier post proceso que consideremos necesario.

2. Añadir URLs para descargar

   miCola.addFileDownload(info, url, “”);

   • Donde info es un diccionario con datos que podemos vincular a esa URL
   • url es la url desde la que queremos descargar el archivo

3. Iniciar/parar las descargas

   miCola.startDownloading();
   miCola.stopDownloading();

4. Guardar/recuperar las colas en localStorage

   miCola.saveFileDownloads();
   miCola.loadFileDownloads();

Código de ejemplo

En la carpeta example se dispone de un ejemplo funcional donde podéis ver una simple aplicación para añadir y descargar imágenes al dispositivo (o navegador Chrome).

Próximos pasos

Este es un proyecto que está en movimiento 😉

En cuanto pueda, añadiré el paquete al repositorio npm, así como a bower para facilitar su instalación todavía más.

Así mismo, también tengo pensado añadir más tests unitarios para aumentar su cobertura.

¡Comparte este artículo! – Si te ha sido útil, seguro que es útil para algún amigo, no te olvides de compartírselo.