Ionic 2 InAppBrowser

This is nifty trick that you can do if you want to target different URL for different platform.

For example, Facebook. iPhone and Android have different URL scheme that you want to target so that you can properly open the Facebook app directly from your Ionic 2 project.

So what you can do is you can target on each platform.

I am using Ionic 2.1.12.

Obviously the first thing you have to do  in order to use InAppBrowser is to add it into your Ionic project first.

ionic plugin add cordova-plugin-inappbrowser

And then make sure that put platform as one of the parameters for constructor.

constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform) {
  this.platform = platform;
}

and then make sure of the import.

import { InAppBrowser } from 'ionic-native';

after that, create a function like the one below:

launchUrl(){
  this.platform.ready().then(() => {
    if (this.platform.is('ios')) {
      // This will only print when on iOS
      // console.log("I'm an iOS device!");
      new InAppBrowser('fb://profile/<idhere>', '_system');
    }
    if (this.platform.is('core')) {
      // This will only print when on iOS
      // console.log("on desktop!");
    }
    if (this.platform.is('android')) {
      // This will only print when on iOS
      // console.log("I'm an iOS device!");
      new InAppBrowser('fb://page/<idhere>', '_system');
    }

  });
}

That’s how it is. It’s simple, right?

Leave a Reply