Playing with Apache Cordova, I could not help but many people having issue wrapping a live hosted website into a mobile application. Most of the issues were related to toolbars still being shown up even after the inAppBrowser options were set.

The code below should be used to replace index.js so it will launch a fresh Cordova Mobile application with no browser signs.

var app = {
    // Application Constructor
    initialize: function () {
        //document.addEventListener("deviceready", onDeviceReady, false);
        document.addEventListener("deviceready", function () {
            var ref = cordova.InAppBrowser.open('http://xpo6.com','_blank','location=no,zoom=no,hidden=yes,hideurlbar=yes,toolbar=no');
            ref.addEventListener("loadstop", function () {
                ref.show();
            });
        }, false);
    },


    onDeviceReady: function () {
        window.open = cordova.InAppBrowser.open;
        this.receivedEvent('deviceready');

    },
    receivedEvent: function (id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

This also avoids issues such as InAppBrowser blank screen or how to remove toolbar from Cordova window.open in browser.

Posted by xpo6

Software developer in the realm of AI, NLP and black magic.

One Comment

  1. Get Qoral Health February 8, 2020 at 3:11 pm

    This app is a light-weight Cordova wrapper around a mobile website. It can be useful to add functionality that only works in apps, like barcode scanning, to a mobile website. While Cordova does a lot to make this possible, a polished, well-working app is not yet trivial. This project simplifies that.

Comments are closed.