Geek Answers Handbook

How to store 40,000 images using HTML5 or Phonegap?

For a long time I was looking for a way to store a large number of images in HTML5 or access them locally and display them.

The application is an ordering and catalog of goods, for example, an e-commerce website, but for bulk orders, and not for end customers, each image is a product, so you need to have 40 thousand images. The need comes from the requirement that the seller can use the tablet offline for several days, weeks and only synchronize with ERP when he has a connection or wants to synchronize.

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

However, I encountered the following limitations:

  • Use html5 offline (application cache). This is limited on iOS devices to 50 MB, and it is difficult to manage the manifest file.
  • Use a webSQL database with base64 encoded images. The same size limit (50 MB).
  • Use localCache with base64, again, size limits (5 to 10 MB).
  • Convert my HTML5 application to use the PhoneGap file API, but then I will lose desktop support for Windows PCs and some problems with web services.

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

Is there an HTML5 way to store a large number of images for offline viewing? The FileSystem API is not supported on mobile devices, and the ability to work on mobile devices is a serious requirement.

+6
source share
5 answers

The solution will be transferred to the port of the HTML5 application in the phoneGap application using the API files.

HTML5 various implementation options are the reason for this decision. Because AppCache is very limited in most mobile browsers, there is also a lack of support for the FileSystem API. The fact that you can only store 16-52 MB in mobile browsers is a limiting factor for the HTML5 web application, which requires a large amount of locally stored data (available offline).

+1
source

Shouldn't Phonegap own Implement the file system API on a mobile device? I mean why Phonegap was created in the first place.

Directly from the Cordoba API docs for FileReader:

Supported Platforms

  • Android
  • BlackBerry WebWorks (OS 5.0 and higher)
  • IOS
  • Windows Phone 7 and 8
  • Windows 8
+2
source

Random though sprite sheet? will only make one file and will minimize requests

0
source

How to start a local web server 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 the local wold web server allows you to get around any HTML restrictions.

0
source

You can just save it in your sqlite database. You can add another field (column) to the product details table.

You can save the image in either BLOB format or base64 format. (in your database).

With phoneGap, you can easily access your database and various tables from your database.

For greater performance and bandwidth savings: What you can do is that you can use lazy image loading. When you upload a new image, just store it in the database.

This way you can avoid I / O, and if you use MVC, you will also have an image object in the product detail object (modality class).

hope this suggestion will work for you :)

0
source

More articles:


All Articles