• Skip to primary navigation
  • Skip to content
  • Skip to footer
  • Sobre mí
  • Servicios
  • Blog
  • Contacto

Uso de API HTML5 fileSystem para cachear datos en Cordova/Phonegap o Chrome

8 septiembre, 2014 by alfonso 2 Comments

Ahora mismo estoy desarrollando un proyecto con Apache Cordova donde debemos implementar un proceso de cacheo para poder mantener información de forma offline. En concreto se necesitan cachear cierta cantidad de ficheros en formato JSON,  así que mi primera aproximación fue pensar en localStorage. El problema es  que se desconoce el tamaño de estos ficheros y en ningún caso se nos garantiza de que todos nos puedan caber en menos de 5MB, que es el límite de este tipo de almacenamiento.

Ya que el proyecto va a estar encapsulado con Cordova, se me ocurrió que esos JSON podrían ir a disco y guardarlos en el sistema de ficheros nativo del dispositivo donde no encontraríamos limitaciones de espacio gracias a la APIs fileSystem de HTML5 implementada por el plugin File de Cordova. Aunque parece ser que las APIs de acceso a fileSystem no van a seguir desarrollándose, es previsible que Cordova mantenga su implementación debido al gran valor aportado como método estándar de acceso al sistema de ficheros nativo.

Se trataría pues de implementar una interfaz similiar a localStorage para gestionar valores de tipo clave: valor,  donde valor sería de tipo texto y lo almacenaríamos en un fichero haciendo uso de clave para nombrarlo. Sin embargo, no podrá ser 100% similar debido a que los procesos de gestión de ficheros son asíncronos, así que necesitaremos incluir funciones callback, una para cuando la operación se realice con éxito, y otra para ejecutar en caso de error.

Ya puestos, como el desarrollo lo suelo realizar bajo Chrome, se incluyen las operaciones necesarias para que funcione también en este navegador. La principal diferencia radica en que mientras el plugin de Cordova no imponen ninguna cuota, Chrome sí la tiene. En Chrome podremos ver qué ficheros se han creado anteponiendo filesystem:// a la URL donde estemos ejecutando nuestra aplicación (ej: filesystem://http://localhost)

Aquí os dejo un guist con el cóidigo que he utilizado.

[gist id=»c3929e79dcf22bb41efa» file=»fileStorage.js»]

[gist id=»c3929e79dcf22bb41efa» file=»ejemplos_de_uso.js»]

  • Facebook
  • Twitter
  • Google+

Desarrollo Móvil,  Desarrollo Web cordova,  File API,  html5,  phonegap

Reader Interactions

Comments

  1. Exos says

    8 septiembre, 2014 at 6:03 pm

    Yo estoy haciendo una libreria para abstraer un poco del API original y hacerla mas node-like:

    https://bitbucket.org/oscargentilezza/cofs/src/bfb589ba0d62d5feed3e464633ca8ebe28089433/fs.js?at=develop

    Esta depende de buffer. Y la utiliza para hacer mas fácil trabajar con archivos binarios y demás.

    Bueno está verde pero capás que te sirve y ya que está si te haces mejoras podrias compartirlas 😛

    Responder
    • Alfonso Marín says

      8 septiembre, 2014 at 8:49 pm

      Muy interesante, de todas formas mi propuesta intenta evitar cualquier dependencia con librerías externas, pero no deja de ser otra opción. Gracias por compartirlo!

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Footer

  • LinkedIn
  • RSS
  • Twitter
  • Aviso legal
  • Política de privacidad
  • Política de cookies
  • Contacto

Copyright ©2023 · Alfonso Marín Marín - Todos los derechos reservados ·

Utilizo cookies para asegurar que doy la mejor experiencia al usuario en nuestro sitio web. Si continúa utilizando este sitio asumiremos que está de acuerdo.Estoy de acuerdo