Launch Websites With Ionic 2 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 2.

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:

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:

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:

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:

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 2 is used in Ionic 2.

A video version of this article can be seen below.

Nic Raboy

Nic is a skilled application developer who has released several native and hybrid mobile applications to iTunes and Google Play. He writes about his development experiences related to making web and mobile app development easier to understand and has experience in Android, Node.js, Apache Cordova, Java, NoSQL, SQL, GoLang, NativeScript, and Unity3D.

  • Duncan Underwood

    hi Nic, If i have an existing projecting already but do have a home.js file like thats in that blank template where abouts do i enter that javascript code?

    • What you shared looks like an Ionic 1 project. My tutorial was for Ionic 2. I shared links within the article for the Ionic 1 version I wrote previously.

      • Duncan Underwood

        ahh ok. thanks very much. keep up the great work with your articles.

  • Yair Neumann

    Hi Nic,
    Excellent tutorial..

    I have a few things that don’t work for some reason, hopefully you’ll have the answer

    To start off the I needed to run this line to install the InAppBrowser plugin:
    cordova plugin add org.apache.cordova.inappbrowser
    instead of what you wrote. If I understand correctly it’s the same thing but never the less maybe it’s the culprit.
    In your home.js it seems you are importing ionic from: ‘ionic/ionic’
    In my app the import is from: ‘ionic-framework/ionic’
    In your home.js, in your constructor you have the following:
    platform: Platform
    This caused an error in my app. The error info was:

    14 | constructor(app: IonicApp, platform: Platform) {

    | ^

    15 |

    16 | // set up our app

    17 | this.app = app;

    In order to fix this I added this line before the constructor:

    static get parameters() {

    }

    Now for the important part, cordova is undefined. I know that isn’t defined in the browser and only in the devices but it’s not defined there as well.

    General info:
    npm –v
    3.7.2

    node –version
    v4.2.1

    cordova –v
    4.2.0

    ionic –v
    2.0.0-beta.17

    Thank you for all your help…

    • I just now updated the tutorial. Because Ionic 2 is in beta things change all the time. Can’t always keep up with them.

      You should use cordova-plugin-* where * is the plugin you wish to install. It is the correct and recommended way to install plugins per the Apache Cordova team.
      They are now using ‘ionic-framework/ionic’ rather than ‘ionic/ionic’
      You probably want to pay attention to this now when using ES6 JavaScript:

      Let me know if that helps you 🙂

      • Yair Neumann

        Do you have any findings as to why cordova is undefined?

        • Are you trying to use ionic serve or test in a web browser?

          • Yair Neumann

            I use ionic serve and then the browser opens on localhost. I also tries ionic emulate ios & android. All of them ended up with cordova being undefined.

          • You cannot use this plugin with ionic serve or via localhost. You must compile and install. If that doesn’t work, try to uninstall the plugin and re-install.

            Best,

    • Josh

      Are there any policy concerns from Google/Apple/Amazon when publishing an app like this in their stores?

      I ask because while having a simple “shell” of a mobile app, which does nothing more than load your externally-hosted web app, sounds like an excellent solution, I’m concerned as to whether the app stores will take issue with it since what they’re QAing/approving is not technically the “real” product.

      As long as there aren’t any policy restrictions that could cause an issue later, I am absolutely 100% on board. Does anyone know for sure or have experience publishing an app like this?

      Edit: oops, didn’t mean to post this as a reply to another comment.

  • Hey Nic… With the latest Ionic CLI version 2.0.0-beta.30 we need to do like this:

    import {Page, Platform} from 'ionic-angular';

    Thanks a lot 😉

    • I was finding it difficult to keep up with all the beta changes. As soon as Ionic 2 enters RC I plan to update all my tutorials.

      For the most part though, the strategy is the same.

  • Josh

    Are there any policy concerns from Google/Apple/Amazon when publishing an app like this in their stores?

    I ask because while having a simple “shell” of a mobile app, which does nothing more than load your externally-hosted web app, sounds like an excellent solution, I’m concerned as to whether the app stores will take issue with it since what they’re QAing/approving is not technically the “real” product.

    As long as there aren’t any policy restrictions that could cause an issue later, I am absolutely 100% on board. Does anyone know for sure or have experience publishing an app like this?

    • My apps use this plugin and they were accepted by both iTunes and Google Play. While you could wrap your entire website with this plugin, I recommend against it. Doing so will leave your users with a very poor experience. Just build a mobile optimized website if this is your plan.

      • Josh

        Yeah, building a mobile-friendly responsive web app deployed in the standard fashion is probably what I’ll end up doing, but there’s of course a certain marketing advantage to distributing it also as an app, because of how differently users can perceive “using an app” versus “going to a website” when the product is actually the same.

  • Lokesh Sahu

    How to close the inappbrowser after i got response from my Restful services.
    Is it possible with ionic 2 version 2.0.0-beta.36

    • If you’re trying to use RESTful services you probably should not use the InAppBrowser. You can use Angular 2’s Http components for that.

      • Lokesh Sahu

        Thank you for the reply.
        Actually i want to integrate fitbit in my mobile app. Integration part is already done in my web app. So i want to use that service in in my ionic 2.

        • Your web app should expose RESTful end points. Using the InAppBrowser is going to give your users a poor experience that will leave you with negative reviews.

          • Lokesh Sahu

            Is there any way to integrate Fitbit in ionic 2.

          • If they have an API sure, but that is not relevant to this post. Your best bet is to ask on stack overflow.

            Best,

          • Lokesh Sahu

            inappbrowser is showing the following error in ionic2 2.0.0

            warn Native: Your current usage of the InAppBrowser plugin is depreciated as of [email protected] Please check the Ionic Native docs for the latest usage details.

            But i followed as for the document only

          • You should probably bring it up with the Ionic Framework people:

            https://ionicframework.com/docs/v2/native/inappbrowser/

            Their documentation uses the same install command that I use.

            Best,

  • Manuel Schulze

    Is it possible to open the InAppBrowser below the normal App Navigation? When I open the Browser as _self or _blank the Navigation Menu and the Navigation Bar on the top are dismissing.

    • The InAppBrowser will always launch a new web view. I don’t know of a Cordova plugin that will allow you to nest one within your application.

      • Manuel Schulze

        Thanks for your answer. I was able to solve it with an iframe. So no Cordova plugin needed.

        • Be very careful with iFrames in a mobile application. You’re trusting that the remote website was built efficiently. If you load an iFrame with content that is poorly done, it will completely kill your user experience.

          This is why I always recommend APIs over iFrames. Get the data you need from an API and present it how you want it. Otherwise I think the InAppBrowser is a safer approach.

          • Manuel Schulze

            Yeah I would also like to use anything else but there is no other way to do this for this specific client. I told them that just using a native wrapper to represent a mobile website is poor user experience, but it was not my decision. Thank you anyway 🙂

          • I totally understand. What the client says, goes 🙂

  • Jose Pablo Brotons

    Hi Nic, I want to open a webpage once the user click an option inside the alert. Do I need to import cordova to the file to make it work?

  • Jose Pablo Brotons

    Hi Nic, I want to open a webpage once the user click an option inside the alert. Do I need to import cordova to the file to make it work? https://uploads.disquscdn.com/images/39af158a46a5e3f7be818eb3a7dd8ba91bcb9bc67fe8a595f92a8f56f3b90b91.png

    • If you’re using TypeScript, yes

  • Guido Arata

    Hi Nic, any chance to have the same tutorial but for TypeScript? Now Ionic Team removed the JS support so…it would be very useful! Thanks! Guido

  • Hi Nic and hi everybody:
    Here’s some help with this from experience with Ionic 2 RC 4 and latest Angular 2 as of 12/31/2016:

    Build a brand new v2 app: $ ionic start MyApp blank –v2
    make sure you have installed the Ionic 2 native (ref: http://ionicframework.com/docs/v2/native/inappbrowser/)
    $ ionic plugin add cordova-plugin-inappbrowser
    Make sure you have imported in your src/app/app.component.ts:
    import { InAppBrowser } from ‘ionic-native’;
    your template/view .html should be something like typical: *************************

    Your .ts file should like something typical: *************************

    import { Component } from ‘@angular/core’;
    import { NavController } from ‘ionic-angular’;
    import { Platform } from ‘ionic-angular’;
    import { InAppBrowser } from ‘ionic-native’;

    @Component({
    selector: ‘page-home’,
    templateUrl: ‘home.html’
    })
    export class HomePage {

    }

    launchUrl() {
    this.platform.ready().then(() => {
    let ref = new InAppBrowser(‘http://lisaiceland.com/’,
    ‘_blank’);
    ref.on(‘exit’).subscribe(() => {
    console.log(‘Exit In-App Browser’);
    });
    });
    }

    }

    save run in ionic lab ($ ionic serve –lab) to emulate and it should work. Will NOT work in Ionic View though.
    Build iOS .ipa or Android .apk (android-debug.apk in dev) and run on a PHYSICAL android device and it’ll work. I just built it to test just now!

    I was very frustrated with all the examples on the net and in stackoverflow no working with a full example.
    Thnx. Happy New Year Nic and everybody! Happy 2017!