Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using HTML5 web database to store files for offline access

Tags:

html

ipad

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?
like image 440
andybee Avatar asked Aug 20 '10 13:08

andybee


People also ask

Does HTML5 support offline storage?

The local storage is a type of HTML5 offline storage that allows user string data to be saved synchronously in their browser. Information is kept in name and value pairs and not available between different browsers on the same device. Local storage can be used as an alternative to cookies.

What is HTML5 offline storage?

What Is HTML5 Offline Storage. HTML5 local storage, a part of the web storage application programming interface, is a way to locally create a storage of data within a user's web browser. It is available without the need for third-party browser extensions or plug-ins.

Do HTML files work offline?

Currently HTML files can only be generated in the browser version of Canvas and are only supported on a computer. HTML offline content is for offline viewing only; you cannot interact with course content directly, such as completing an assignment or viewing any submissions.

What allows HTML5 applications to work in an offline state?

Offline web applications are available through the new HTML Offline Web Application API, also known as HTML Application Cache. Beyond simply serving pages to the user when an Internet connection is unavailable, often an offline application requires storage of user's information.


2 Answers

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.
like image 183
Gary Avatar answered Oct 21 '22 07:10

Gary


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.

like image 33
Ganesh Krishnan Avatar answered Oct 21 '22 07:10

Ganesh Krishnan