Check App Availability on your Device — Ionic Native

Introduction to App Availability

App Availability feature helps you to determine whether an application is already available on your device or not. This allows an app to check whether a specific app in installed on the device or not. For this particular exercise, we will go ahead and install the plugins that are required.

NOTE: Do always remember in any of the tutorial series when we are concerned with Ionic Native we will be using a sample app as well as we always need to inject the module imported into the app’s module.
  1. Install the ionic Cordova plugin for app availability.
  • ionic cordova plugin add cordova-plugin-appavailability
  1. Adding the Ionic native binding for the app availability.
  • npm install — save @ionic-native/app-availability

How to use App Availability Plugin?

To use the ionic app availability plugin the first thing after importing the plugin is to include it into the app’s module. This is an easy and straight forward process. follow the code below in order to get it done.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ActionSheetDemoPage } from '../pages/action-sheet-demo/action-sheet-demo';
import { ImmersiveViewPage } from '../pages/immersive-view/immersive-view';
import { PermissionDemoPage } from '../pages/permission-demo/permission-demo';

/**
* List of Native Plugins
*/
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ActionSheet } from '@ionic-native/action-sheet';
import { AndroidFullScreen } from '@ionic-native/android-full-screen';
import { AndroidPermissions } from '@ionic-native/android-permissions';
import { AppAvailability } from '@ionic-native/app-availability';

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
ActionSheetDemoPage,
ImmersiveViewPage,
PermissionDemoPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
ActionSheetDemoPage,
ImmersiveViewPage,
PermissionDemoPage,
],
providers: [
StatusBar,
SplashScreen,
ActionSheet,
AndroidFullScreen,
AndroidPermissions,
AppAvailability,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule { }

Now go ahead and just add this piece of code in your controller, this will help you to pull out whether a certain app is installed or not in your system.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AppAvailability } from '@ionic-native/app-availability';
import { Platform } from 'ionic-angular';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
hasTwitter: string = 'I Dont Know';
constructor(public navCtrl: NavController, private appAvail: AppAvailability, private platform: Platform) {

}
checkTwitter() {
let app;

if (this.platform.is('ios')) {
app = 'twitter://';
} else if (this.platform.is('android')) {
app = 'com.twitter.android';
}

this.appAvail.check(app)
.then(
(yes: boolean) => this.hasTwitter='App Twitter is available',
(no: boolean) => this.hasTwitter = 'App Twitter is NOT available'
);
}
}

This should help you to get the ionic app availability working and you should be able to see the status of the app if you monitor the variable in the front end.

Hope you guys liked this as well as the previous tutorials of the Ionic native. We highly suggest you guys get along and comment and let us know your opinions.


Originally published at The Web Juice.