Using HTML5 web database to store files for offline access

Question

I am attempting to create a simple web app for iPad which needs to be used in places with no internet connectivity. The app is essential a simple "slideshow" but also includes some video files (typically around 100MB.)

Initially I was planning on using HTML5's offline manifest caching to sync the assets to the iPad's memory when internet connectivity was available before going on the road, but unfortunately there appears to be a restriction (at least in iOS 3.2) that the cache can total no more than 5MB.

Looking at the way Google use HTML5 web databases I was wondering if an alternative solution might be to sling the video/image assets in to blobs in a database. However, I am having great difficulty finding a way to read the binary data in to store in the blobs in the database.

My questions are:

1. Could anyone provide [links to] an example of reading in binary data in to a client-side HTML5 web database (and accessing it)?
2. Would this be a sensible alternative method of implementation in respect of the 5MB restriction?

Answer 1

Would love to find out how you got on with this. I have just posted a similar question here - http://stackoverflow.com/questions/3568557/caching-a-large-number-of-images-in-a-jquery-html5-application

Answer 2

Just wanted to share my experience as it might be relevant. We have (tried) to develop an iPad based web app that needs to store 1000's of images and files (such as presentations and word documents)

A mock up on Windows (Safari 4 & 5) can import images encoded as base64 into a Web SQL database (blob field) and displaying them using a db callback to set the source of image tags like src="data:image/jpeg;base64,...base65encimagedata..."

Other files (doc, ppt, pdf) had to be uploaded using the offline cache / manifest. Even though we can get them into a database as base64, there was no way to view them.

Now the problem... Desktop Safari lets you create a large SQL database (I did 1 Gig imported 3000 images.) and has not imposed a known limit on the offline cache.

However on the iPad things are less useful because I cannot create a database more then 50Mb, plus the 5Mb cache limit.

Some alternatives (I have not tried them yet) have been:

1. Try Opera Mini (or other available browsers) on the iPad
2. I know Google Chrome (which uses webkit) has a limit on its SQL database size, but you can 'patch it' ( https://groups.google.com/a/chromium.org/group/chromium-html5/browse_thread/thread/8672b2e0cd69a9f7/ebf17070d32c1168?lnk=gst&q=database+size#ebf17070d32c1168) with some SQL to increase its size. Maybe this can be done on the iPad somehow.

Answer 3

The database has a limit of 5 mb after which the user is prompted to allow for around 20 more mb. The hard limit is 20-25 mb after which you cannot insert any more records into your localstorage.