Launch Websites With Ionic Using The InAppBrowser

With Ionic 2 development in full force, I figured it would be a good idea to update one of my more popular blog articles. Previously I had written about using the Apache Cordova InAppBrowser to launch external URLs using Ionic Framework 1. This time I’m going to accomplish the same, but using Ionic 2 and Angular.

Like with the previous tutorial we will be using the Apache Cordova InAppBrowser plugin. The only change is in our framework.

Let’s walk through this by creating a new project. Using your Command Prompt (Windows) or Terminal (Mac and Linux), run the following commands:

ionic start ExampleProject blank --v2
cd ExampleProject
ionic platform add ios
ionic platform add android

A few things to note here. You cannot add and build for the iOS platform unless you are using a Mac computer. It is also very important you are using the Ionic CLI that supports building Ionic Framework 2 projects.

With the project created, let’s go ahead and add the Apache Cordova InAppBrowser plugin. From your Terminal or Command Prompt, run the following:

cordova plugin add cordova-plugin-inappbrowser

Now we’re ready to start developing!

To keep this simple we’re only going to touch two files. Start by opening your project’s app/pages/home/home.js file and changing the code to look like the following:

import {Platform, Page} from 'ionic-framework/ionic';


@Page({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

    static get parameters() {
        return [[Platform]];
    }

    constructor(platform) {
        this.platform = platform;
    }

    launch(url) {
        this.platform.ready().then(() => {
            cordova.InAppBrowser.open(url, "_system", "location=true");
        });
    }
}

We’ve made a few changes in the above code.

The first change is that we are now including the Platform dependency. With it we can make sure Apache Cordova plugins are ready before trying to use them. This is demonstrated in the launch function. In the launch function we are making use of the cordova.InAppBrowser.open function which takes three parameters. The first parameter is the URL you wish to navigate to. The second is what browser to use. The third parameter is options for the plugin.

In our example, the URL is passed in from the UI that calls the function. Let’s take a look at that now. Open your project’s app/pages/home/home.html file and change it to look like the following:

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <button (click)="launch('https://www.thepolyglotdeveloper.com')">Launch URL</button>
</ion-content>

This UI view is simple. We have a button that calls the launch function of our HomePage class when clicked.

If you’re interested in knowing what browsers are available or what options are available, they can all be seen from the plugins README file found on GitHub.

Conclusion

Between Ionic Framework 2 and Ionic Framework 1, how you use the plugin isn’t different. The difference comes in how Angular is used in Ionic 2.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.