I am currently trying to create a mechanism to read a large catalog of products for an offline web aplication.
Currently the mechanism that I have in place is to read all the images in a loading process from a manifest file for offline caching. This has severe problems in iOS 6, only 50MB and there appears to be something broken in the support for HTML Offline in Safari for iOS6, even more so that in iOS5.
However I am faced with multiple problems. The Filesystem API is not supported in mobile browsers, and the File API does not solve my problem of reading the files. So I am currently thinking about moving my web application to a Phonegap application, but that is not without it’s own issues… I am looking for a cross platform way of handling an offline image gallery.
The first thing, to keep in mind is, that a phonegap-app is a hybrid app. Nearly everything you can perform with a native app, can also be done with phonegap.
To be more concrete in you case:
You can start with the phonegap-example.
Now you need a service (serverside), where you can get a list of images (maybe, some JSON-structure). This can be read by your phonegap app.
With the FileTransfer object you can download files to the devices “harddrive”.
Now comes the part I am not 100% sure (just 98%). If your files are stored on the device, you can simply show them, by using there
file://-url inside animage-tag.But this can be tested with a really simple app. I think you will not need more than ~50 lines of
JavaScript, to prove my approach.You app is limited by the platform limitations and the app-stoore conditions.