How to store 40.000 images using HTML5 or Phonegap?

Question

I have searched a long time for a way to store a large number of images in HTML5, or access them stored locally and display them.

The application is a product ordering and catalog, like an e-commerce web site but for bulk orders, not final clients, each image is a product, that is why there is a need to have 40k images. The need comes from the requirement that the salesperson can use the tablet in offline mode for days, weeks, and only sync with the ERP once he has connection or wants to sync.

Each salesperson has a dedicated Android tablet Tegra3 Quad-Core, 32Gb for the application. But the application also supports iPad and Chrome on the desktop.

However I have faced the following limitations:

1. Use html5 offline (app cache) - This is limited in iOS devices to 50Mb, and hard to manage the manifest file.
2. Use webSQL database with base64 encoded images. Same size limitations (50Mb).
3. Use localCache with base64, again size limitations (5 to 10Mb).
4. Convert my HTML5 app to use PhoneGap File API, but then I lose desktop Support for Windows PCs, and have some issues with web services.

So perhaps I am missing an alternative way to do this?

Is there an HTML5 way to store a large number of images for offline viewing? FileSystem API is not supported in mobile devices and being able to run on mobile devices is a strong requirement.

Answer 1

Shouldn't Phonegap's own Implementation of the Filesystem API work on mobile? I mean that's why Phonegap was created in the first place.

Straight from the Cordova API Docs for FileReader:

Supported Platforms

• Android
• BlackBerry WebWorks (OS 5.0 and higher)
• iOS
• Windows Phone 7 and 8
• Windows 8

Answer 2

The solution is going to pass to a port of the HTML5 application to a phoneGap application using the File API.

HTML5 different implementations is the reason for this decision. Since AppCache is very limited in most mobile browsers, as well as the lack of support of the FileSystem API. The fact that you can only store from 16-52Mb on mobile browsers is a limiting factor to a HTML5 web app that requires large amounts of locally stored data (available offline).