How to display Custom local page if url fails to load in Cordova inappbrowser

Question

I am Using InApp browser and calling a page. What I want is that if the Internet is connected to a device then it has to display the url and if is not connected then it displays the local page.

function onDeviceReady() {

    document.addEventListener('pause', onPause.bind(this), false);
    document.addEventListener('resume', onResume.bind(this), false);
    var inAppBrowserbRef;    
    inAppBrowserbRef = window.open('http://www.xxxxx.com', '_self', 'location=no,toolbar=no');
    inAppBrowserbRef.addEventListener('loadstart', inAppBrowserbLoadStart)

    inAppBrowserbRef.addEventListener('loadstop', inAppBrowserbLoadStop);

    inAppBrowserbRef.addEventListener('loaderror', inAppBrowserbLoadError);

    inAppBrowserbRef.addEventListener('exit', inAppBrowserbClose);

    function inAppBrowserbLoadStart(event) {       
        var options = { dimBackground: true };
        SpinnerPlugin.activityStart("Loading...", options);

    if (navigator.connection.type == Connection.NONE)

{ navigator.notification.alert('An internet connection is required

to continue', alertSuccess, "Network Error", "Ok");

        }



        function alertSuccess() {


            navigator.app.exitApp();


        }


    }

    function inAppBrowserbLoadStop(event) {


        SpinnerPlugin.activityStop();



        if (navigator.connection.type == Connection.NONE) {


            navigator.notification.alert('An internet connection is required 

to continue', alertSuccess, "Network Error", "Ok");

        }

        function alertSuccess() {


            navigator.app.exitApp();


        }
    }

    function inAppBrowserbLoadError(event) {


        SpinnerPlugin.activityStop();



        if (navigator.connection.type == Connection.NONE) {


            navigator.notification.alert('An internet connection is required to continue', alertSuccess, "Network Error", "Ok");


        }

        function alertSuccess() {


            navigator.app.exitApp();


        }
    }

    function inAppBrowserbClose(event) {  


        SpinnerPlugin.activityStop();



        inAppBrowserbRef.removeEventListener('loadstart', iabLoadStart);


        inAppBrowserbRef.removeEventListener('loadstop', iabLoadStop);


        inAppBrowserbRef.removeEventListener('loaderror', iabLoadError);


        inAppBrowserbRef.removeEventListener('exit', iabClose);


    }

Does anyone know where I have to put redirect page?

Answer 1

You'll want to use the cordova-plugin-network-information plugin (which it looks like you're using) to detect online/offline state. In your onDeviceReady() event handler you can add listeners to respond to the offline/online events:

document.addEventListener("offline", goOffline, false);
document.addEventListener("online", goOnline, false);

function goOffline() {
    // Redirect to your local/offline page here
}

function goOnline() {
    // Load the actual online content in InAppBrowser
}