Develop offline mobile app using phonegap

In this article, we are going to demonstrate the steps that we followed while creating offline mobile app.

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 ipragmatech_table');
   tx.executeSql("CREATE TABLE IF NOT EXISTS ipragmatech_table (id integer primary key, user_id integer,                   section text, subsection text)");
});

Step3: Insert Into Table

db.transaction(function(tx) {
   tx.executeSql("INSERT INTO ipragmatech_table VALUES (4,2,'section1','Universal Beam')");
   tx.executeSql("INSERT INTO ipragmatech_table VALUES (5,2,'section1','Universal Column')");
   tx.executeSql("INSERT INTO ipragmatech_table VALUES (6,2,'section1','Parallel Flange Channel')");
});

Step4: Execute Other Queries

db.transaction(function(tx) {
   tx.executeSql("SELECT *  FROM ipragmatech_table order by section asc",[],querySuccess,errorCB);
});

Step5:Delete a database

window.sqlitePlugin.deleteDatabase({name: "ipragmatech_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.

Develop offline mobile app using phonegap was last modified: April 9th, 2015 by Pragmaapps