Apache Cordova: Descarga y visualización de PDFs

De -
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:
 


Comentarios

  1. Anónimo2 de octubre de 2015, 17:23

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

    ResponderEliminar
    Respuestas
    1. Fernando5 de octubre de 2015, 9:33

      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. Breyt3 de noviembre de 2016, 23:03

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

    ResponderEliminar
  3. Fernando4 de noviembre de 2016, 10:58

    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

Publicar un comentario

Entradas populares de este blog

Procesos Linux - exec y fork

De -
Imagen
En esta entrada me gustaría hablar acerca de la creación de procesos con C cuando trabajamos con Linux. En mi caso trabajo con Debian. Debo dejar claro que hablamos de PROCESOS y no de hilos. Acerca de los hilos hablaré en entradas posteriores. En esta entrada hablaré acerca de como se crean nuevos procesos mediante código en C. De las dos posibilidades que existen. No me pararé en exceso a explicar en detalle qué es un proceso, cambios de contexto de procesos, la tabla de procesos, imagen de memoria, o el ciclo de vida de un proceso. Estos temas cabe mencionarlos, pero como ya he dicho no haré una explicación detallada acerca de ellos. Para comenzar me gustaría hacer una explicación acerca de los procesos. Comenzando por la definición de un proceso: "Un proceso es un programa en ejecución" . El proceso esta formado por el código del programa y el conjunto de datos asociados a la ejecución del programa. El proceso además posee una imagen de memoria, esto es el espacio de...
Leer más

Función __doPostBack

De -
A veces en ASP.NET tenemos la necesidad de realizar un 'post back' desde JavaScript. Si analizamos el HTML que se genera con ASP.NET encontramos que los controles de ASP.NET llaman a la función __doPostBack para realizar esta acción. Esta es una función Javascript generada automáticamente por ASP.NET. Esta función recibe dos parámetros: eventTarget eventArgument Por lo general en eventTarget se envía el ID del control que causa el 'post Back' mientras que en eventArgument se envía información adicional . Al realizarse el 'post back' ASP.NET analiza estos parámetros para ver quién ha realizado el 'post back' y a que evento debe acudir. Sin embargo, podemos enviar información que no sea un ID en el eventTarget y que nos sirva para controlar una llamada a __doPostBack desde una función nuestra de JS.  function realizarPostBack(dato) { __doPostBack('miPostBack', dato); } Por ejemplo tenemos la siguiente función de JS: ...
Leer más

Google Maps - Windows Form

De -
Imagen
Esta entrada está dedicada a .NET. Para las entradas de .NET las realizaré con Visual Studio 2010 en C#.  En esta entrada realizaremos una aplicación Windows que incluya lo que hemos realizado hasta ahora de Google Maps . Es decir una aplicación de ventana con un navegador embebido que nos muestre nuestro mapa. Primero mostrare como realizarlo de la manera más sencilla y posteriormente veremos cómo modificar el html desde nuestro código. Para comenzar en la forma sencilla explicaré los pasos a realizar sin necesidad de pararnos a ver código. Primero crearemos un nuevo proyecto de ' Aplicación de Windows Forms'. Para comenzar en el diseñador del formulario agregaremos un control llamado " WebBrowser ". El siguiente paso es agregar el html a nuestra solución. Basta con copiar el fichero a nuestra solución. Lo siguiente que debemos hacer es a la hora de cargar el formulario o si queremos que se cargue al pulsar un boton etc en el evento Click del botón. El control ...
Leer más