martes, 9 de junio de 2015

Apache Cordova: Descarga y visualización de PDFs

A partir de un caso de uso real me surge la necesidad de descargar PDFs y visualizarlos en una aplicación multiplataforma llevada a cabo con Apache Cordova y AngularJS. Para probar cómo podía llevarlo a cabo realicé un pequeño ejemplo en el que se descarga y almacena un PDF en la aplicación y su visualización.

Puedes descargar el código aquí 

Objetivo

Aplicación de Apache Cordova junto con AngularJS que permita descargar al dispositivo un PDF y visualizarlo.

Plugins necesarios

  1. InAppBrowser https://github.com/apache/cordova-plugin-inappbrowser
  2. File https://github.com/apache/cordova-plugin-file
  3. FileTransfer https://github.com/apache/cordova-plugin-file-transfer
  4. Device https://github.com/apache/cordova-plugin-device

Utilidad

  1. InAppBrowser - Permite la apertura de nuevas ventanas del navegador, incluso permite la llamada al navegador del sistema.
  2. File - Rutas del sistema de archivos.
  3. FileTransfer - Descarga del PDF.
  4. Device - Conocer en qué plataforma estamos trabajando.

Compatibilidad

  •  Android
  • iOS
* Los plugins utilizados son compatibles con Windows Phone y Windows 8  por lo tanto habría que estudiar este caso e implementarlo para estas plataformas.

Singularidades de plataforma

En este desarrollo entra en juego algunas singularidades de cada plataforma que limitarán la universalidad de la aplicación.

Android

  • En Android NO es posible abrir una ventana nueva dentro de la aplicación que muestre el PDF.
  • Permite abrir PDFs desde el navegador del sistema (permitiendo abrirlos desde una aplicación como Adobe Acrobat).
  • SI dispone de carpetas en las que el contenido puede ser accedido desde otras aplicaciones

iOS

  • En iOS SI posible abrir una ventana nueva dentro de la aplicación que muestre el PDF.
  • Permite abrir PDFs desde el navegador del sistema (solamente abre el documento desde el navegador del sistema).
  • NO dispone de carpetas en las que el contenido puede ser accedido desde otras aplicaciones

Solución

Se mostrará 1 botón de descarga del PDF y una vez descargado el PDF aparecerá un botón para su visualización. La aplicación de ejemplo dispondrá de una sola vista, un controlador y dos servicios de AngularJS. Uno de los servicios se encarga de la descarga y almacenamiento del PDF mientras que el otro servicio se encarga de la visualización del PDF. 

En ambos servicios de AngularJS se emplea el objeto $document para poder suscribirse al evento deviceready y así acceder a los plugins de Cordova después de que se hayan cargado.

Debido a las singularidades de Android el documento se descargará en una carpeta compartida de la aplicación y se visualizará llamando al sistema. Es necesario descargarlo en una carpeta compartida para que otro programa pueda acceder a él.

Por otro lado en iOS el documento se almacenará en una carpeta que no sea eliminada por el sistema y se mostrará en una ventana dentro de la aplicación. En este caso se visualiza dentro de la aplicación debido a que en iOS no podríamos compartir nuestro documento con otras aplicaciones.

En resumidas cuentas solamente dos parámetros deberán ser dependientes de la plataforma: 
  • La ruta de almacenamiento
  • La forma de abrir el PDF

Rutas de almacenamiento

En la documentación del Plugin File se encuentran tablas en las que se explica qué rutas son "limpiadas" por el sistema operativo, cuáles son de lectura/escritura y cuáles son privadas.

Para esta aplicación de ejemplo se han elegido las siguientes rutas del plugin que cumplen las condiciones deseadas:
  • Android: cordova.file.externalApplicationStorageDirectory
  • iOS: cordova.file.dataDirectory

Apertura del PDF

En la documentación del Plugin InAppBrowser se especifican los valores del parámetro que indica la forma en la que se abrirá la nueva ventana. 

Para esta aplicación de ejemplo se han utilizado los siguientes valores del parámetro para cada plataforma:
  • Android: _system
  • iOS: _blank

Resultado


Resultado en Moto G:
 

 

Resultado en iPhone 5:
 


5 comentarios:

  1. Los PDF quedan almacenados temporamente en al APP, despues que se descarga la primera vez ya no los vuelve a descargar?

    ResponderEliminar
    Respuestas
    1. En este ejemplo se queda almacenado y al volver a entrar se vuelve a descargar. Se puede implementar una comprobación para ver si el archivo está descargado y no volverlo a descargar (Por ejemplo usando el local storage). En el ejemplo no está debido a que es un a prueba de concepto para comprobar cómo descargar PDFs y mostrarlos. Si quieres saber además qué directorios almacenan permanentemente o temporalmente tus archivos lo puedes ver en la documentacion del plugin: cordova-plugin-file https://github.com/apache/cordova-plugin-file

      Espero haber resuelto tu duda =)

      Eliminar
  2. Hola quiero ejecutar esta aplicacion en visual studio 2015 ya lo iporte pero me marca error como puedo ejecutarla

    ResponderEliminar
  3. Hola, cuando realicé este ejemplo aún no se había incorporado en las Apache Cordova todo el tema de seguridad con whitelist. Mira la documentación: https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/index.html

    ¿Alguna información extra acerca del error que te reporta visual studio para saber qué ocurre?

    Voy a ver si consigo actualizar el ejemplo a las últimas versiones

    ResponderEliminar