How can I cache image files locally with PhoneGap / Cordova?

Question

Here's my problem :

I making a Web/Mobile app, using AngularJS and Cordova. For offline purpose, I use localStorage to store all the data of the app (JSON, parameters, and so on).

The thing is : I need to store / cache images locally (again, offline purpose). As localStorage size limit is around 5mo, I can't use it, I need more.

I thought I could use a cache manifest, but it doesn't work, as I need to update it regulary, without recompiling the app (I thought I could put the cache manifest on an external server, but it's like I can't use a cache manifest from another domain).

So I'm thinking of using Cordova/Phonegap File API, but I have no idea to achieve that...

Any help or ideas ?

Answer 1

After long hours searching on SO and Github, I found imgCache.js, a JS library that handle file cache for Chrome, Android and iOs (through Cordova).

https://github.com/chrisben/imgcache.js/

Then, basically :

var target = $('.cached-img');

ImgCache.isCached(target.attr('src'), function(path, success){
          if(success){
            // already cached
            ImgCache.useCachedFile(target);
          } else {
            // not there, need to cache the image
            ImgCache.cacheFile(target.attr('src'), function(){
              ImgCache.useCachedFile(target);
            });
          }
        });

Answer 2

Utilize the HTML5 FileSystem via the Cordova File plugin. The Cordova File documentation should get you a FileEntry->File. That File should then be usable via the HTML 5 FileSystem methods. https://github.com/apache/cordova-plugin-file