CODEWITHSUNDEEP
htmlcordovaoffline-cachinghtml5-appcache
Astronaut
Astronaut

Reputation: 7051

How to store 40.000 images using HTML5 or Phonegap?

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.

Upvotes: 6

Views: 6670

Answers (5)

Umang9
Umang9

Reputation: 117

You can simply store it in your sqlite database. You can add one more field (column) to your product detail table.

You can store image either in BLOB format OR in base64 format. (in your database).

using phoneGap you can easily access your database and different tables from your DB.

For more performance and to save bandwidth : What you can do is you can apply lazy loading of images. When ever you download new image just store it into database.

This way you can avoid the I/O Operations and also if you are using MVC then in your product detail object (Modal class) you will have image object also.

hope this suggestion works for you :)

Upvotes: 0

Mark Leighton Fisher
Mark Leighton Fisher

Reputation: 5703

How about running a local webserver that can only accept local connections? In Apache, somthing like "Allow from 127.0.0.1" in the configuration file should do the trick. Using a local webserver wold let you sidestep any HTML limitations.

Upvotes: 0

Astronaut
Astronaut

Reputation: 7051

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).

Upvotes: 1

user2135947
user2135947

Reputation: 9

Random though, sprite sheet? would make just one file and would minimize requests

Upvotes: 0

Oliver Weichhold
Oliver Weichhold

Reputation: 10306

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

Upvotes: 2

Related Questions