Ionic opening external app

Ionic Framework ionic-v3
1

Hey,
I’ve had a hunt around the forum, but can’t seem to find a lot.
In Ionic 1, I’m using [Startapp](https://github.com/lampaa/org.apache.cordova.startapp to open Instagram.

I’d like to know what the best method for opening an installed app on a users device is for Ionic 2.
Ionic Deeplinks seems to be for personal applications? And window.open with the inapp browser doesn’t work for Android in my testing.

Many thanks,
Nick

2 Likes
2

Maybe you can use this plugin https://ionicframework.com/docs/v2/native/webintent/ but I’m not sure at all.

3

Install plugins

ionic plugin add cordova-plugin-inappbrowser
ionic plugin add cordova-plugin-appavailability
ionic plugin add cordova-plugin-device

Import

import { InAppBrowser, AppAvailability, Device } from 'ionic-native';

And use

launchExternalApp(iosSchemaName: string, androidPackageName: string, appUrl: string, httpUrl: string, username: string) {
	let app: string;
	if (Device.device.platform === 'iOS') {
		app = iosSchemaName;
	} else if (Device.device.platform === 'Android') {
		app = androidPackageName;
	} else {
		let browser = new InAppBrowser(httpUrl + username, '_system');
		return;
	}

	AppAvailability.check(app).then(
		() => { // success callback
			let browser = new InAppBrowser(appUrl + username, '_system');
		},
		() => { // error callback
			let browser = new InAppBrowser(httpUrl + username, '_system');
		}
	);
}

openInstagram(username: string) {
	this.launchExternalApp('instagram://', 'com.instagram.android', 'instagram://user?username=', 'https://www.instagram.com/', username);
}

openTwitter(username: string) {
	this.launchExternalApp('twitter://', 'com.twitter.android', 'twitter://user?screen_name=', 'https://twitter.com/', username);
}

openFacebook(username: string) {
	this.launchExternalApp('fb://', 'com.facebook.katana', 'fb://profile/', 'https://www.facebook.com/', username);
}
21 Likes
4

Thanks so much! Any idea how I can open just the application, not on a username? I’ve tried removed the “Username” argument, and setting the open to “instagram://app”, but doesn’t seem to want to open, with no errors.

5

According to Custom URL Scheme seems like “instagram://app” should work on iOS.

If not, you can use lampa.startapp plugin as you mentioned above.

If it’s not definitions for TypeScript, you can try approaches as described here.

1 Like
6

Also read ios-9-not-opening-instagram-app-with-url-scheme.

7

Thanks, yeah found the fix for this in Ionic 1 (editing info.plist with LSApplicationQueriesSchemes).
Problem at the moment is opening Android, will try with Startapp as you suggest.
Thanks again.

10

On my side fb://profile/pageusername is not working

On my side fb://page/pageusername is working.

1 Like
11

Hi Nicksmit Kindly tell me what kind of modification you did in LSApplicationQueriesSchemes, as I need to integrate facebook messenger through my ionic1 app.

12

@eivanov It worked for me, in IONIC 3 PROJECT…

13

Do you know how to open an iOS App without know the Schema Name (By example, this app: https://itunes.apple.com/cl/app/santander-chile/id604982236?mt=8) ?

14

Gosh, still works in Ionic 3

15

@eivanov I want to launch installed application on button click action, button is present on the page which is opened using in-app-browser in my application.
I am using Ionic 3. Can you help me…?

16

@praful21 I managed to make instagram open but couldn’t make Unity3d open. Maybe my code is useful for you

 import { Component } from '@angular/core';
import { NavController, NavParams, IonicApp, Platform, Alert } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { messaging } from 'firebase';

export const myConst = {
  InstaApp: {
    ios: {
       //storeUrl: 'itms-apps://itunes.apple.com/nl/app/blackboard-mobile-learn/id376413870?mt=8',
       appId : 'instagram://app',
    },
    android: {
      // storeUrl: 'market://details?id=com.blackboard.android',
       appId: 'com.instagram.android'
    }
  }
}

@Component({
  selector: 'page-augmentedreality',
  templateUrl: 'augmentedreality.html'
})
export class AugmentedRealityPage {
  Coordinates: any;
  watch:any;
  constructor(public navCtrl: NavController, public navParams: NavParams, public plt: Platform) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad AugmentedRealityPage');
  }
  
  ARCamera(){
    if (this.plt.is('ios')) {
      let appId = myConst.InstaApp.ios.appId;
      let appStarter = (window as any).startApp.set(appId);
      appStarter.start(function (msg) {
        console.log('starting ig app: ' + msg);
      }, function (err) {
        // If app is not installed, this will open url to download
        console.log('ig app not installed', err);
        // window.open(myConst.InstaApp.ios.storeUrl, '_system'
        // );
        let msg_err = "Application is not found";
        alert(msg_err);
      });
    } else {
      let msg_err = "Platform not supported";
      alert(msg_err);
      console.log(msg_err);
    }
  }
}
17

@scarffy Hi, thanks for the code…its very helpful, but I am not able to launch the app from in-app-browser.
Scenario - I have pages (HTML/Angular) from server rendered inside my app using in-app-browser and want to open native application from these pages.

With the above code I manage to launch external app from my app but not from in-app-browser pages.

18

Remember add this to your config.xml, in iOS platform (to open the app, and not the browser):

  <platform name="ios">
    <config-file overwrite="true" parent="LSApplicationQueriesSchemes" target="*-Info.plist">
      <array>
        <string>fb</string>
        <string>instagram</string>
        <string>twitter</string>
      </array>
    </config-file>
  </platform>

Also, for get my facebook page id, i got from this https://findmyfbid.com/. So, the link for open Facebook app is fb://profile/177102365662505

4 Likes
19

It works with the apps in the example, but if I need to open another app, how do I know what the app url is?