Wednesday, October 10, 2012

IndexedDB Example on Cordova (Phonegap) - iOS

Get the source and run on XCode

The IndexedDB API is currently supported by IE10, Firefox and Chrome, while browsers like Opera and Safari support the WebSQL API. With such a divide, writing web sites that utilize offline storage mechanisms and are supported on all the major browsers is hard.
The IndexedDB polyfill project aims to solve this problem by using WebSQL implemented in browsers like Safari and Opera to expose IndexedDB API for web applications. With the polyfill, websites can now use the single IndexedDB API for all offline needs. Opera and Safari make up a good percentage of the mobile browsers, and with the polyfill, mobile sites can leverage offline storage better.

This post tries to explore the mobile web and explains the usage of the IndexedDB polyfill in HTML5 based mobile application frameworks like Cordova (Phonegap). Since Cordova simply exposes a UIWebView and the underlying browser is a flavor Webkit. This post explains how the IndexedDB polyfill is leveraged to write offline Phonegap applications with the IndexedDB API.

The screenshot below shows the sample IndexedDB Application that uses the jquery IndexedDB library. The source code (more importantly, the www folder) is exactly the same as for the web with one difference. You can get the source code and open it in XCode to see it in action.

The only difference between this and the desktop version is the time when the application starts. Since the IndexedDB polyfill has to create table (dbversions) for housekeeping and that takes some time, the code to bootstrap the schema needs to be delayed a little.

The screenshots below show the Safari Developer connected to the iPhone 6 simulator, with the sqlite databases and their contents, as saved by the polyfill.


In addition to the sample application, I also added the IndexedDB polyfill test suite, that can be accessed via the link at the top. All the tests seem to run indicating that most parts of the API covered in the test suites seem to work on Cordova too.

With the IndexedDB API now usable in Cordova iOS, I am looking at developing a sample application that shows a similar application for Cordova Android, Watch out this space for updates.


Kyaw Tun said...

awesome! love it.

Gabe Johnson said...

are continuing development on the shim, or are you going to use facebooks polyfill?

Parashuram said...

My hope is to combine both the efforts into one, but I have not heard back about a pull request that fixes a bug in the polyfill. I will be continuing development on this, but you should be able to swap one out for another and it should still work.

Gabe Johnson said...

Very exciting work! I like the jQuery plugin as well (you beat me to the punch).

Post a Comment