Launch or install third party apps from with in ionic app

ionic-v1
1

launch third party apps from with in ionic app.

for example, Microsoft note, word or any application which is native for android or ios. If possible install those apps from my ionic app or launch at least from my app

2

Hi @digish777 ,

Iā€™ve implemented this kind of functionality using the https://github.com/lampaa/com.lampa.startapp plugin.
For both Android and iOS I check if a certain app is installed by attempting to start it. If is fails, the app is not present and the user is directed to either Play Store or App store with a deep link to the specific app. Your users can then install it.

For the external app you want to start you will need the package name (for Android) or itā€™s custom url scheme (for iOS). For the Play and App stores you will need the deeplinks for your specfic external app.

Hereā€™s a snippet from my constants containing the details for external app (in this case Blackboard):

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

In your controller add logic to try and start the external app or open the store link for the platform in question:

var appId = "";
if (ionic.Platform.isAndroid()) {
// plugin com.lampa.startapp
  appId = myConstants.blackboardApp.android.appId;
  navigator.startApp.start(appId, function (msg) {
      console.log('starting BB app: ' + msg);
  }, function (err) {
      console.log('BB app not installed', err);
      window.open(myConstants.blackboardApp.android.storeUrl, '_system');
  });
} else {
    if (ionic.Platform.isIOS() || ionic.Platform.isIPad()) {
        appId = myConstants.blackboardApp.ios.appId;
        navigator.startApp.start(appId, function (msg) {
        console.log('startting BB app: ' + msg);
    }, function (err) {
        console.log('BB app not installed', err);
        window.open(myConstants.blackboardApp.ios.storeUrl, '_system');
      });
    }
}

Good luck.

1 Like
3

one question:
itms-apps://itunes.apple.com/nl/app/blackboard-mobile-learn/id376413870?mt=8// how to i get hold of the package name (for Android) , in my case i need evernote package name, i have other packages of mine, but third party is required too.

4

In a desktop browser visit the Play Store and open the details page of the app you need. The package name is in the url as ā€˜idā€™ parameter. For example https://play.google.com/store/apps/details?id=com.evernote

5

Thanks, I will check that method.

6

[23:27:59] Property ā€˜startAppā€™ does not exist on type ā€˜Navigatorā€™.
((

1 Like
7

@slowkazak, it seems in more recent versions the syntax changed a bit. I experienced this myself.
This is what Iā€™m currently using (see https://github.com/lampaa/com.lampa.startapp for more options) in my controller. Please compare to the snippet above.

var appId, appStarter = "";
if (ionic.Platform.isAndroid()) {
    // plugin com.lampa.startapp
    appId = myConstants.blackboardApp.android.appId;
    appStarter = startApp.set({"package": appId});
    appStarter.start(function(msg) {
        console.log('starting BB app: ' + msg);
    }, function(err) {
        console.log('BB app not installed', err);
        window.open(myConstants.blackboardApp.android.storeUrl, '_system');
    });
} else {
    if (ionic.Platform.isIOS() || ionic.Platform.isIPad()) {
        appId = myConstants.blackboardApp.ios.appId;
        appStarter = startApp.set(appId);
        appStarter.start(function(msg) {
            console.log('starting BB app: ' + msg);                
        }, function(err) {
            console.log('BB app not installed', err);
            window.open(myConstants.blackboardApp.ios.storeUrl, '_system'
        });
    }
}
8

can you provide demo of open external application from ionic 2 Application??

9

and after install plugin startApp is undefined please help.

10

I have a similar situation and would like to know how to implement this plugin with an ionic 2 application. After installing the plugin I just get the startApp is undefined even after declaring the variable before the @Component on my page.

11

@hardikslk
I got this working (after some research)

My dev enviroment:
Cordova CLI: 6.5.0 Ionic Framework Version: 3.0.1 Ionic CLI Version: 2.2.2 Ionic App Lib Version: 2.2.1 Ionic App Scripts Version: 1.3.0 ios-deploy version: Not installed ios-sim version: Not installed

I started with the standard Contact page from the Tabs sample project and installed lampaaā€™s startUp plugin:
ionic plugin add com.lampa.startapp

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';

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


@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  constructor(public navCtrl: NavController, public plt: Platform) {    
  }

  openBB() {
    if (this.plt.is('android')) {
      let appId = myConst.blackboardApp.android.appId;
      let appStarter = (window as any).startApp.set({ "package": appId });
      appStarter.start(function (msg) {
         console.log('starting BB app: ' + msg);
      }, function (err) {
        console.log('BB app not installed', err);
        window.open(myConst.blackboardApp.android.storeUrl, '_system');
      });
    } else if (this.plt.is('ios')) {
      let appId = myConst.blackboardApp.ios.appId;
      let appStarter = (window as any).startApp.set(appId);
      appStarter.start(function (msg) {
        console.log('starting BB app: ' + msg);
      }, function (err) {
        console.log('BB app not installed', err);
        window.open(myConst.blackboardApp.ios.storeUrl, '_system'
        );
      });
    } else {
      let msg_err = "Platform not supported";
      alert(msg_err);
      console.log(msg_err);
    }
  }
}

Hope it helps!

5 Likes
12

If you are in iOS startApp.start will evaluate to false if you donā€™t whitelist the app url scheme you want to call to the Info.plist file of your app.
Simply open your appā€™s .plist (usually platforms/ios//-Info.plist) and add the following code with your needed Schemes.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>twitter</string>
    <string>whatsapp</string>
    <string>bblearn</string>
</array>
13

it can be done automatically? I mean , the app detect your o.s then download the app without other views in between for the user.

14

Can someone told me how I can know the appId of an iOS application ?

Iā€™ve tried the name of the app like for Twitter --> twitter, work well but for some app it doesnā€™t work.
Is there any list ? Iā€™ve search in the AppStore but I didnā€™t found anything :confused:

15

@diegom

I tried this to launch external app from my application but I am getting ā€œError: exec proxy not found for :: startApp :: startā€ error.
Can you please help me with this errorā€¦?

16

Sorry, I no longer program in Ionic and last time I tested was about a year ago. Unfortunately Ionic introduces a lot of breaking changes between releases (within the framework and with external plugins). Should work with the versions listed in the post though (however I know downgrading sometimes is not an option)