Hi all,
Recently I’m working in a hybrid mobile App based on Ionic and cordova.
The versions installed in my project are as follows:
ionic = 3.9.2
node = v8.9.4
npm = 5.6.0
Angular CLI: 1.6.7
Node: 8.9.4
OS: win32 x64
Angular: 5.2.11
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 7.3.10
@angular-devkit/schematics: 7.3.10
@schematics/angular: 8.3.29
typescript: 2.6.2
webpack: 3.8.1
My aim of work is to save user data for offline use. To solve this purpose I installed the following plugins:
npm i --save @ionic-native/sqlite@4
npm i --save cordova-sqlite-storage@4
As my volume of offline data will be a big one I decided to go with SQLite database.
As a first attempt I tried ionic storage with a combination of localstorage option but that did not work, as after sync half of data it is showing “Quota exceeded” error. The reason I found is local storage having a storage capacity of 5MB max.
Currently when I implemented the SQLite database approach what I experienced is in nested call back the execution get lost and there is no response comes after that even no error in console log too. This issue I’m facing only when running the App from the real android device (A Tablet (android version installed
Lollipop 5.1.1 API level 22). While running from the emulator there is no such issues and all works fine.
Let me explain my code execution
-
I placed a API call to get some data from server the API call reside under a Service (for Example Service1.ts)
-
Once I received data from API call I call a function to save the data in offline database. This function body again reside under another Service (for Example Service2.ts)
-
In my case Service1.ts ----> call API —> get response —> call Service2.ts (specific function to save offline data)
The function I’m using for saving offline data is as follows:
databaseObj.open().then(function() {
debugger;
databaseObj.executeSql(this.queryToDelete, [Field_1_value]).then(function(deleteresponse){
console.log(deleteresponse);
this.queryToDelete = ‘’;
databaseObj.executeSql(this.singleDBQuery, [Field_1_value]).then(function(insertresponse){
console.log(‘Data saved’);
this.singleDBQuery = ‘’;
console.log(insertresponse);
}.bind(this)).catch((inserterror) => {
console.log('Data save error: ’ + inserterror.message);
})
}.bind(this)).catch((deleteerror) => {
console.log('Data deletion error: ’ + deleteerror.message);
});
}.bind(this))
The reason I used bind because while debugging the code attached with real device I found in this function scope after calling the databaseObj.open() I lost the reference of this keyword. Then it only points to windows.
Using bind solved my purpose of retain ‘this’ value but databaseObj.executeSql not giving any response as well as error.
Any suggestion from anyone of the team is really appreciated. As I’m in some strict release plan for this work and this thing is not working at all.
If coding approach wise I’m doing any wrong approach please correct that area also.
Regards,
Sounak