Webview in PhoneGap/Cordova or Turn your website into mobile application Cordova/phonegap

First of all you need to install Phonegap/Cordova in your system and if not installed you can refer to this link https://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html .

I hope you are done with the Cordova/Phonegap thing and now you have a link which will open up a website and you want to convert it into an application.Making an application from a web link in just 10-15 minutes don't you think its amazing.So lets start with it.

If you are familiar with Cordova or Phonegap then you will definitely know about deviceready Event Listener in Cordova/Phonegap. But if not don't worry it a very basic thing you can set up the Cordova/Phonegap thing in your system from the link shared previously.It will guide you completely how to install Cordova in your system and it will also setup one basic project.In that project you will find deviceready Event Listener.In short deviceready is the event which is fired after the cordova file is completely loaded and your application is ready.

You can simply do like this and make your application from the link.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
 // Now safe to use the Codova API
 window.location="http://your.website";
 }
You also need to declare something like this in xml file to tell Cordova that it is safe.
<access origin="http://your.website" subdomains="true"/> 

Now in case if the internet connection in the mobile is not working and you run the above code it will not work.But there is also a solution for this.


In Cordova /PhoneGap we have a plugin for checking network connection just install the plugin from your command line window by running this command

cordova plugin add cordova-plugin-network-information

After this add some code to check your internet connection type

function checkConnectionType() {
      var networkState = navigator.network.connection.type;
      var states = {};
      states[Connection.UNKNOWN] = 'Unknown connection';
      states[Connection.ETHERNET] = 'Ethernet connection';
      states[Connection.WIFI]   = 'WiFi connection';
      states[Connection.CELL_2G] = 'Cell 2G connection';
      states[Connection.CELL_3G] = 'Cell 3G connection';
      states[Connection.CELL_4G] = 'Cell 4G connection';
      states[Connection.NONE]   = 'No network connection';
      return networkState;
    }

Now you can add logic to do something in case of no internet connection.

function onDeviceReady(){
   var networkState = checkConnectionType();
       /*load local files if there is not network connection */
    if (networkState == Connection.NONE) {
        window.location="open some other local file like sorry no internet connection";
       } else {
         window.location="http://your.website";
       }
    }
    

Or you can also open a native Cordova/Phonegap alert in case of no internet connection like this.

function onDeviceReady(){
    var networkState = checkConnectionType();
      /* load local files if there is not network connection */
        if (networkState == Connection.NONE) {
           navigator.notification.alert('Oops! Sorry No internet connection');
         } else {
           window.location="http://your.website";
          }
      }
 

This is my first one hope you will like it and fell free to ask any questions.