Friday, 23 March 2018

How to Check App Availability in Ionic 2 and Ionic 3.

Have you ever came across a situation in your application development in ionic, where you need to use other app on the device. the situations be like, logging in using twitter, facebook etc. This Post we are going to see on, how to check if an app is installed on the user's device.


This post assumes that you already have the ionic project created and running. lets create a page in our project to implement the Check App Availability example.

Create a checkapp Page


Execute below command in your projects command prompt to add checkapp page to your project "pages" folder in "src" directory.

ionic generate page checkapp
The above code will generate checkapp folder in your project's src/pages folder.
Note : import the checkapp page in to your app module and add it to the declarations and entryComponents, if your cli does not create an "checkapp.module.ts" file in your newly created page (ie. checkapp folder).

Modify app.module.ts file


app.module.ts


 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 { CheckappPage } from '../pages/checkapp/checkapp ';

        import { StatusBar } from '@ionic-native/status-bar';
        import { SplashScreen } from '@ionic-native/splash-screen';

        @NgModule({
        declarations: [
            MyApp,
            HomePage,
            ListPage,
            CheckappPage 
        ],
        imports: [
            BrowserModule,
            IonicModule.forRoot(MyApp)

        ],
        bootstrap: [IonicApp],
        entryComponents: [
            MyApp,
            HomePage,
            ListPage,
            CheckappPage 
        ],
        providers: [
            StatusBar,
            SplashScreen,
            {provide: ErrorHandler, useClass: IonicErrorHandler},

        ]
        })
        export class AppModule {}


Now That's over, lets get to the the plugin and functionality part. For this example we are going to use "App Availability" plugin from IONIC NATIVE.
Execute below command in your projects command prompt .

ionic cordova plugin add cordova-plugin-appavailability
for the plugin to work we should also install the app-availability node module also.
npm install --save @ionic-native/app-availability
Now, that we have installed the plugin, we should import the plugin to our component, and also inject it into our components constructor. Modify the components checkapp.ts file as shown below.

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

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


since we have imported the plugin and also injected it to our components constructor. Now, it's time to check for the app availability on the device. lets write a function which executes when the user click on check availability button.

Modify checkapp.ts file

checkapp.ts


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

      /**
       * Generated class for the PhotoviewerPage page.
       *
       * See https://ionicframework.com/docs/components/#navigation for more info on
       * Ionic pages and navigation.
       */

      @IonicPage()
      @Component({
        selector: 'page-photoviewer',
        templateUrl: 'photoviewer.html',
      })
      export class PhotoviewerPage {
        
        constructor(public navCtrl: NavController, public navParams: NavParams,private appAvailability: AppAvailability, private platform: Platform) {

        }

        ionViewDidLoad() {
          console.log('ionViewDidLoad PhotoviewerPage');
        }

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

            this.appAvailability.check(appName)
            .then(
               (yes: boolean) => { console.log(appName + ' is available') },
               (no: boolean) =>  { console.log(appName + ' is not available') }
            );
        }
      }


Above Given Code Explanation..

this.platform.is('') will return true if the platform is same as the given platform.
this.appAvailability.check() will take the app name as value, and checks if the given app is installed on the particular device. it will return boolean value as result.
That's it for this post. please leave a comment if you have any queries regarding the post.

0 comments:

Post a Comment