Customizing an Adobe Cordova app – Part 6

In Part 5 of the present series of posts, we had developed an app that displays a screen with a link to a web site. We need to click this link in order to load the actual site. Furthermore, when we click the link, the app opens the smartphone’s default web browser and displays the home page of the web site in this browser. What I really would like is to be able to click the app’s icon on the smartphone and have the web site’s home page load directly onto the phone’s screen.

It seems to be quite difficult to locate an actual example of how to achieve this goal. One of the problems may be that such an app – termed a URL wrapper – is frowned upon (and won’t be accepted) by the various app stores. The wrapper app is just too simple. It has no “features”. Consequently, I suspect that there is no incentive for app developers to build such an app. But, if the app is so simple, why is it so difficult for the rest of us to develop one that performs this – and only this – “simple” task?

Most searches for something like “cordova open a web site” provide hits that suggest using the InAppBrowser plugin. Many of these simply replay the basic documentation provided by Apache for the plugin. Some have code examples in the form of snippets but, for those of us who don’t speak JavaScript, these are not necessarily all that helpful. However, by combining information from multiple posts, and applying a little trial and error to the coding process, I believe I have identified a working solution.

Previously, we created a Cordova project, and then modified the sample index.html and index.css files to get to the stage where we have a simple screen display with a link to our web site of choice. The next trick is to modify the file {project folder}/www/js/index.js in order to call the InAppBrowser plugin.

Here, I am grateful to “Jay” who, in an answer to a 2017 post on Stack Overflow, provided some JavaScript code that shows how to call InAppBrowser, and also to call an error routine should the target web site be unavailable. The “trick” seems to be to insert this coding sequence into index.js at the end of the section labelled “// Update DOM on a Received Event” as shown below.

I don’t claim to know anything about JavaScript, but scanning through the lines of code in this module it appears that an EventListener is established to determine when the device (our smartphone) is ready for action. The original module then hands over control to index.html where our previously-modified HTML code displays the web site’s URL as a link.

However, our strategy is to interject a call to InAppBrowser before control goes back to index.html. This will result in the web site being loaded inside the app as desired. The specific line of code that performs this task is:

appBrowserRef = cordova.InAppBrowser.open('http://www.opcug.ca/', 
  '_blank', 'location=yes');

The three parameters used in the plugin call are:

url = ‘http://www.opcug.ca’ (the URL for our specific web page)

target = ‘_blank’ (open the page in InAppBrowser)

option = ‘location=yes; (display InAppBrowser’s location bar)

With this code included in index.js, we simply rebuild the app as indicated in the earlier posts in this series. Running the modified app displays the splash screen, and then immediately loads the home page of our target web site.

We can navigate the site normally but, when we use the phone’s back arrow, or click on the “X” (Close) in the top-right corner of the app’s location bar, the screen drops back to display the app’s icon and the link to our target web site (as specified by index.html).

Note that clicking on the above-noted link, causes the web site to load in the system browser since, in this case, the URL is being called directly from the HTML file and not through the InAppBrowser plugin.

So, there we have it – an Android app that will instantly load a web page. It’s really only useful, as it stands, if you wish to launch the web site for the Ottawa PC Users’ Group (opcug.ca); however, if you follow the discussion in all the posts in the series, you should easily be able to customize the code to build a similar app that will load your web site of choice. And, to help in this endeavour the following zip file may prove useful!

Sample Files

In order to provide an actual working example of the coding that can be used to launch a web page from an Android app, the complete contents of the three primary files (index.html, index.css and index.js) that are used in the current Cordova project are provided for downloading as the file SiteFinder.zip. The code included in these files is working as of the date of writing this post; however, since Android seems to be a very fluid development environment, there is no guarantee that this will continue to be the case going forward.

Download the file: SiteFinder.zip (4.1 KB)

References:

cordova-plugin-inappbrowser
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/

Introduction to the DOM
https://www.digitalocean.com/community/tutorials/introduction-to-the-dom

InappBrowser plugin is not working
https://stackoverflow.com/questions/38527009/inappbrowser-plugin-is-not-working

Advertisements
This entry was posted in Android and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s