IndexedDB Example on Cordova (Phonegap) - iOS

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