Can I use indexedDB in a cordova iOS application?

Question

I'm getting an InvalidAccessError when I try to open a Indexed Database in my cordova iOS application.

Platform:

cordova: 5.4.1
cordova-ios: 4.0.1
iOS 9.2 (simulator and real device)

I already added the Plugin to use the WKWebview which made the the indexedDB object at least defined, but the error is thrown. The code works in chrome, safari and mobile safari if I run it via cordova's own web server.

config.xml looks like this

<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
    <allow-intent href="market:*" />
</platform>
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
</platform>
<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

and I try to open the indexedDB with this:

openDb: function() {
    var openRequest = window.indexedDB.open(DB_NAME, DB_VERSION);
    openRequest.onupgradeneeded = function(event) {
        console.log('upgrade needed');
        console.log(event);
        myIndexDb = event.target.result;
        var options = {
            autoIncrement: true,
            keyPath: 'key'
        };
        var objectStore = myIndexDb.createObjectStore(DB_STORE_NAME, options);
    };
    openRequest.onerror = function(event) {
        console.log(event);
        console.log('indexDB open Error!');
    };
    openRequest.onsuccess = function(event) {
        console.log('open success');
        myIndexDb = this.result;
    };
    openRequest.onblocked = function(event) {
        console.log('request is blocked');
        console.log(event);
    }
}

kluka · Answer 1 · 2016-01-08T12:50:27.487

1

At the moment it works with the Telerik Plugin https://github.com/Telerik-Verified-Plugins/WKWebView (and cordova-ios 3.9.2)

edited Jan 08 '16 at 12:50

answered Jan 05 '16 at 17:40

kluka

271
3
16

cordova-ios 4.9.2 doesn't exists. There are other alternatives to telerik plugin is you use cordova-ios 4.0.0 or greater http://stackoverflow.com/questions/32405798/state-of-wkwebview-on-cordova-ios-9/32452158#32452158 – jcesarmobile Jan 07 '16 at 15:28
That was a typo - I meant cordova-ios 3.9.2 - And with the linked `cordova-plugin-wkwebview-engine` indexedDB does not work – kluka Jan 08 '16 at 12:50
I found using PhoneGap Build I was only able to use the CDWKWebViewEngine plugin if I added it as a plugin to my config.xml - http://stackoverflow.com/questions/35573145/cordova-wkwebview-plugin-with-phonegap-build-6-0-0 However, as yet I haven't been able to successfully call window.indexedDB.open() from within my app even though window.indexedDB exists. – Laurence C Feb 23 '16 at 10:54

jcesarmobile · Answer 2 · 2018-07-24T15:04:16.117

1

EDIT:

Looks like IndexedDB problems were fixed on iOS 10, and also added it to UIWebView.

OLD ANSWER: The way to workaround the problem with cordova-plugin-wkwebview-engine and IndexedDB is to use a local webserver.

You can use the wkwebview-engine-localhost plugin to workaround the bug adding the local webserver. To install the plugin use

cordova plugin add https://github.com/apache/cordova-plugins/tree/master/wkwebview-engine-localhost

edited Jul 24 '18 at 15:04

answered Mar 31 '16 at 08:07

jcesarmobile

51,328
11
132
176

1

Be aware that you'll need to assign yourself a fixed tcp port number for the embedded web server or else you'll get a new database every time the application starts and the embedded server selects a new, random, tcp port. – jptknta May 06 '16 at 16:50

Can I use indexedDB in a cordova iOS application?

2 Answers2