I am currently working on developing an offline application using PhoneGap and I need to integrate a local database for this purpose. In my index.js file, which loads the application, I have a global variable.
var db;
I have a controller that saves the database information in an indexedDB database when the user logs in, allowing them to use the application offline.
//controller call
Database.create(res.data.categories);
function Database() {
return {
create: function (categoryDocs) {
var request = indexedDB.open("kaldoa", 1);
request.onsuccess = function (event) {
db = event.target.result;
console.log("DB loaded successfully");
};
request.onerror = function (event) {
console.log(event)
};
request.onupgradeneeded = function (event) {
db = event.target.result;
console.log("DB initialized / created");
//create collections
db.createObjectStore("categories", {autoIncrement: true});
//create documents
var transaction = event.target.transaction;
var categories = transaction.objectStore("categories");
//add array objects to document
categories.add(categoryDocs);
};
}
}
}
After checking in the Chrome inspector, the databases are successfully created and everything seems to be functioning well.
Next, I aim to display the stored data named 'categories' in another controller specifically designed for handling categories.
function categoryCtrl($scope, Category){
Category.browse().onsuccess = function (e) {
$scope.categories = e.target.result.value;
};
}
However, I've encountered a problem where the data works fine in Chrome but fails to work in PhoneGap, throwing a console error:
Error: undefined is not an object (evaluating 'db.transaction')
This console error pertains to the services responsible for fetching the categories data.
function Category() {
return {
browse: function () {
return db.transaction(["categories"], "readonly").objectStore("categories").openCursor()
}
}
}
I've spent the entire day trying to troubleshoot why it functions correctly in Chrome but not in PhoneGap. I understand that with the release of iOS 10 on September 29, 2016, Apple added support for both Safari and WebView.