Sometimes, you need to insert a link from your own Ionic App to another app that might or might not be installed on the users phone. To make this work, you need to check if the app exists on the users phone and insert a link to the app or the web based on the availability. An example is a link to a Facebook page.

In my case, I was building an Ionic 4 app, and I had the requirement to link to social media such as Instagram and Facebook. To install the native plugin with the ionic wrapper, do the following:

ionic cordova plugin add cordova-plugin-appavailability
npm install --save @ionic-native/app-availability

In the package config for the Ionic 4, make sure to use the beta version of the plugin (the Ionic 4 framework is in beta at the time of writing this post):

"@ionic-native/app-availability": "^5.0.0-beta.14",

AppAvailability must be imported in your app module and added the the providers. Since we are running Ionic 4 and Angular 6 we have to add the “/ngx” to the import statement:

...
import { AppAvailability } from '@ionic-native/app-availability/ngx';
...
@NgModule({
	...
	providers: [
		...
		AppAvailability,
		...
	],
	bootstrap: [AppComponent]
})
export class AppModule {}

Then, on the Ionic page, we add a method for opening an url from the page and a private method for launching the app based on availability. Each app has it’s own url scheme, url for pointing at pages/users, and it’s own internal app reference based on the operating system. Examples of url schemes including links to pages/users are:

• Facebook: fb://facewebmodal/f?href=https://www.facebook.com/test
• Instagram: instagram://user?username=test
• Twitter: twitter://user?screen_name=test

To open the links to the app / web, we utilize the InAppBrowser. For more information about using the native InAppBrowser, have a look here.

The complete code for my Ionic page component is as follows:

import { Component } from '@angular/core';
import { AppAvailability } from '@ionic-native/app-availability/ngx';
import { InAppBrowser, InAppBrowserObject } from '@ionic-native/in-app-browser/ngx';
import { Platform } from '@ionic/angular';

@Component({
	selector: 'app-contact',
	templateUrl: 'contact.page.html',
	styleUrls: ['contact.page.scss']
})
export class ContactPage {

	constructor(private appAvailability: AppAvailability, private platform: Platform, private inAppBrowser: InAppBrowser) {}

	// pass in the app name and the name of the user/page
	openUrl(app: string, name: string, fbUrl?: string) {
		switch (app) {
			case 'facebook':
				this.launchApp('fb://', 'com.facebook.katana', 'fb://facewebmodal/f?href=' + fbUrl, 'https://www.facebook.com/' + name);
				break;
			case 'instagram':
				this.launchApp('instagram://', 'com.instagram.android', 'instagram://user?username=' + name, 'https://www.instagram.com/' + name);
				break;
			case 'twitter':
				this.launchApp('twitter://', 'com.twitter.android', 'twitter://user?screen_name=' + name, 'https://twitter.com/' + name);
				break;
			default:
				break;
		}
	}

	private launchApp(iosApp: string, androidApp: string, appUrl: string, webUrl: string) {
		let app: string;
		// check if the platform is ios or android, else open the web url
		if (this.platform.is('ios')) {
			app = iosApp;
		} else if (this.platform.is('android')) {
			app = androidApp;
		} else {
			const browser: InAppBrowserObject = this.inAppBrowser.create(webUrl, '_system');
			return;
		}
		this.appAvailability.check(app).then(
			() => {
				// success callback, the app exists and we can open it
				const browser: InAppBrowserObject = this.inAppBrowser.create(appUrl, '_system');
			},
			() => {
				// error callback, the app does not exist, open regular web url instead
				const browser: InAppBrowserObject = this.inAppBrowser.create(webUrl, '_system');
			}
		);
	}
}

And the code for the HTML view page is as follows:

<ion-header>
	<ion-toolbar color="primary" class="page-toolbar">
		<ion-buttons slot="start">
			<ion-back-button></ion-back-button>
		</ion-buttons>
		<ion-title>
			<img src="../../assets/icon/logga.png" style="display:inline-block" height="30px" />
		</ion-title>
	</ion-toolbar>
	<ion-grid color="primary" style="background-color: #3B647A">
		<ion-row>
			<ion-col padding padding-top padding-bottom>
				<ion-title color="tertiary">
					{{ 'CONTACT_TITLE' | translate }}
				</ion-title>
			</ion-col>
		</ion-row>
	</ion-grid>
</ion-header>
<ion-content>
	<ion-list>
		<ion-list-header>{{ 'FOLLOW_SOCIAL_MEDIA' | translate }}</ion-list-header>
		<ion-item (click)="openUrl('facebook', 'test', 'https://www.facebook.com/test/')">
			<ion-icon name="logo-facebook" slot="start"></ion-icon>
			Facebook
		</ion-item>
		<ion-item (click)="openUrl('instagram', 'test')">
			<ion-icon name="logo-instagram" slot="start"></ion-icon>
			Instagram
		</ion-item>
	</ion-list>
</ion-content>