How to cache images and html files in PhoneGap

Question

I need a way for cache images and html files in PhoneGap from my site. I'm planning that users will see site without internet connection like it will be with it. But I see information only about sql data storing, but how can I store images (and use later).

Answer 1

To cache images check out this library -of which I'm the creator-: imgcache.js . It's designed for the very purpose of caching images using the local filesystem. If you check out the examples you will see that it can also detect when an image fails to be loaded (because you're offline or you have a very bad connection) and then replaces it automatically with the cached image. The user of the webapp doesn't even notice it's offline.

As for html pages.. if they're html static files, they could be stored locally in the web app (file:// in phonegap). If they're dynamically generated pages, check the localStorage API if you have a small amount of data, otherwise the filesystem API.

For my web app I retrieve only json data from my server (and process/render it using Backbone+Underscore). The json payload is stored into the localStorage. If the application gets offline, it will fetch json data from the localStorage instead of the server (home-baked fork of Backbone.dualStorage)

You then get the full offline experience: pages+images.

Answer 2

Caching like you might need for simple offline operation is not exactly that easy.

Your first option is the cache manifest. It has some limitations (like the size of the cache) but might work for you since it was designed to do what you want.

Another options is that you can store content on the disk of the device using the file system APIs. This has some drawbacks like security and the fact that you have to load the file from a path / url that is different than you might normally load it from on the web. Check out the hydra plugin for an example of this.

One final option might be to store stuff in localStorage (which has the benefit of being private on all platforms) and then pull it out of there when needed ... that means base64'ing all your images tho so that is a pretty big departure from just standard caching.

Answer 3

Caching is very much possible on Android OS. but on Apple as stated above there are limitations with the size of the images and cache size etc.

If you are willing to integrate and allow the caching on iOS you can use "cache manifest" to do so. but keep the draw backs and limitations in mind. Also if you want to save the file to Documents folder under my App, Apple will reject your App. The reason is the system backup all data under Documents folder to iCould after iOS6, so Apple does not allow big data like images or JSON file which could sync from your server again to keep in this folder.

So there is another work around which is good So one can use LocalFileSystem.TEMPORARY instead. It does not save the data to Library/Cache, but it save data to temp folder of App, which does not been auto backup to iCloud and not auto deleted either.

Regards Rajeev