Developing mobile app for multiple platforms and supporting it on variety of mobile devices can be challenging. Next biggest challenge could be network connectivity issue, what shall happen if there is no internet connection ? Do you want user to get frustrated as the mobile app won’t work at all. In these scenarios, offline feature for the mobile app could be savior for a mobile users.
Recently, we have developed a Rolodex mobile app (iOS/Android) for our client. Our client’s requirements were to display the user manual and content don’t change frequently. Moreover the users of the mobile app would have almost no internet connectivity. So we proposed our client to build the app with offline support. In this article, we are going to demonstrate the steps that we follow creating offline feature for the mobile app.
Proposed Solution for offline mobile app:
We gathered the client requirements and did our analysis. After analyzing the client requirements, we had proposed to support offline feature on the mobile app. To support the offline feature, we need to integrate mobile database with our mobile app based on phonegap and jquerymobile.
There are several third party plugins available to integrate database with phonegap application. We choose SQLITE plugin for database transactions in our application. Here are the steps to integrate database with phonegap application.
Install SQLITE Plugin:
Just Open command prompt and go to your project path and install plugin using CLI:
cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git
Database integration using SQLIITE plugin:
After install the SQLIITE plugin. Follow the below steps for database integration for our phonegap application:
Step1: Opening Database
document.addEventListener("deviceready", onDeviceReady, false);
var db;
function onDeviceReady() {
db = window.sqlitePlugin.openDatabase({name: "DB"});
}
Step2: Create a database:
db.transaction(function(tx) {
tx.executeSql('DROP TABLE IF EXISTS pragmaapps_table');
tx.executeSql("CREATE TABLE IF NOT EXISTS pragmaapps_table (id integer primary key, user_id integer, section text, subsection text)");
});
Step3: Insert Into Table
db.transaction(function(tx) {
tx.executeSql("INSERT INTO pragmaapps_table VALUES (4,2,'section1','Universal Beam')");
tx.executeSql("INSERT INTO pragmaapps_table VALUES (5,2,'section1','Universal Column')");
tx.executeSql("INSERT INTO pragmaapps_table VALUES (6,2,'section1','Parallel Flange Channel')");
});
Step4: Execute Other Queries
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM pragmaapps_table order by section asc",[],querySuccess,errorCB);
});
Step5:Delete a database
window.sqlitePlugin.deleteDatabase({name: "pragmaapps_table.db"}, successcb, errorcb);
Conclusion:
Hence by using the above approach, we can create a mobile app with offline support . Feel free to contact us if you have any further queries.
