Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A polyfill for IndexedDB using WebSql
JavaScript HTML Other
branch: master

Readme.md

IndexedDB Polyfill

Use a single offline storage API across all desktop and mobile browsers

Build Status Dependencies npm Bower License

Live Demo!

Features

Installation and Use

You can download the development or production (minified) script, or install it using NPM or Bower.

Node

npm install indexeddbshim

Bower

bower install IndexedDBShim

Using the polyfill

Add the script to your page

<script src="dist/indexeddbshim.min.js"></script>

If the browser already natively supports IndexedDB, then the script won't do anything. Otherwise, it'll add the IndexedDB API to the browser. Either way, you can use IndexedDB just like normal.

// Open (or create) the database
var open = indexedDB.open("MyDatabase", 1);

// Create the schema
open.onupgradeneeded = function() {
    var db = open.result;
    var store = db.createObjectStore("MyObjectStore", {keyPath: "id"});
    var index = store.createIndex("NameIndex", ["name.last", "name.first"]);
};

open.onsuccess = function() {
    // Start a new transaction
    var db = open.result;
    var tx = db.transaction("MyObjectStore", "readwrite");
    var store = tx.objectStore("MyObjectStore");
    var index = store.index("NameIndex");

    // Add some data
    store.put({id: 12345, name: {first: "John", last: "Doe"}, age: 42});
    store.put({id: 67890, name: {first: "Bob", last: "Smith"}, age: 35});

    // Query the data
    var getJohn = store.get(12345);
    var getBob = index.get(["Smith", "Bob"]);

    getJohn.onsuccess = function() {
        console.log(getJohn.result.name.first);  // => "John"
    };

    getBob.onsuccess = function() {
        console.log(getBob.result.name.first);   // => "Bob"
    };

    // Close the db when the transaction is done
    tx.oncomplete = function() {
        db.close();
    };
}

Fixing Problems in Native IndexedDB

Even if a browser natively supports IndexedDB, you may still want to use this shim. Some native IndexedDB implemenatations are very buggy. Others are missing certain features. There are also many minor inconsistencies between different browser implementations of IndexedDB, such as how errors are handled, how transaction timing works, how records are sorted, how cursors behave, etc. Using this shim will ensure consistent behavior across all browsers.

To force IndexedDBShim to shim the browser's native IndexedDB, add this line to your script:

window.shimIndexedDB.__useShim()

On browsers that support WebSQL, this line will completely replace the native IndexedDB implementation with the IndexedDBShim-to-WebSQL implementation.

On browsers that don't support WebSQL, but do support IndexedDB, this line will patch many known problems and add missing features. For example, on Internet Explorer, this will add support for compound keys.

Debugging

The IndexedDB polyfill has sourcemaps enabled, so the polyfill can be debugged even if the minified file is included.

To print out detailed debug messages, add this line to your script:

window.shimIndexedDB.__debug(true);

Known Issues

All code has bugs, and this project is no exception. If you find a bug, please let us know about it. Or better yet, send us a fix! Please make sure someone else hasn't already reported the same bug though.

There are a few bugs that are outside of our power to fix. Namely:

iOS

Due to a bug in WebKit, the window.indexedDB property is read-only and cannot be overridden by IndexedDBShim. There are two possible workarounds for this:

  1. Use window.shimIndexedDB instead of window.indexedDB
  2. Create an indexedDB variable in your closure By creating a variable named indexedDB, all the code within that closure will use the variable instead of the window.indexedDB property. For example:
(function() {
    // This works on all browsers, and only uses IndexedDBShim as a final fallback 
    var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;

    // This code will use the native IndexedDB, if it exists, or the shim otherwise
    indexedDB.open("MyDatabase", 1);
})();

Windows Phone

IndexedDBShim works on Windows Phone via a Cordova/PhoneGap plug-in. There are two plugins available: cordova-plugin-indexedDB and cordova-plugin-indexeddb-async. Both plug-ins rely on a WebSQL-to-SQLite adapter, but there are differences in their implementations. Try them both and see which one works best for your app.

Building

To build the project locally on your computer:

  1. Clone this repo
    git clone https://github.com/axemclion/IndexedDBShim.git

  2. Install dev dependencies
    npm install

  3. Run the build script
    npm start

  4. Done
    The output files will be generated in the dist directory

Testing

Automated Unit Tests

Follow all of the steps above to build the project, then run npm test to run the unit tests. The tests are run in PhantomJS, which is a headless WebKit browser.

Testing in a Browser

If you want to run the tests in a normal web browser. Then you'll need to spin-up a local web server and then open test/index.html and/or tests/index.html in your browser.

Testing in a Cordova/PhoneGap app

If you want to run the tests in a Cordova or PhoneGap app, then you'll need to create a new Cordova/PhoneGap project, and add the IndexedDB plug-in. Then copy the contents of our tests directory into your project's www directory. Delete our index.html file and rename cordova.html to index.html.

Contributing

Pull requests or Bug reports welcome !!

Something went wrong with that request. Please try again.