Ionic 2+ : Open URLs in Chrome Custom Tabs with Cordova and Ionic Native 3.x+ -- Words (335)

Ionic
Ionic 2+ : Open URLs in Chrome Custom Tabs with Cordova and Ionic Native 3.x+

Introduction


Chrome custom tabs allows you to open a in app chrome tab in your mobile app to open external URLs and web sites .

In this tutorial we are going to see a simple Ionic example that makes use of Chrome In App Custom tabs .

Creating a new app


The first step will be creating a new app using the Ionic CLI .

Simply run :

ionic start ChromeCustomTabsExample blank 
cd ChromeCustomTabsExample 

Then install the required plugins from npm :

$ ionic cordova plugin add cordova-plugin-browsertab --save 
$ npm install --save @ionic-native/browser-tab    

Now you need to add this plugin to your app main module :

Head over to src/app/app.module.ts :

/* ... */
import { BrowserTab } from '@ionic-native/browser-tab';

@NgModule({
declarations: [
    MyApp,
    HomePage 
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    BrowserTab,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}        

Now we are ready to use BrowserTab by injecting it in any component from where we want to launch a chrome custom tab :

Open src/pages/home/home.ts and add a method to open an url .

import { Component } from '@angular/core';
import { BrowserTab } from '@ionic-native/browser-tab';

@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomePage {

constructor(private browserTab: BrowserTab) {
}

openUrl(){
    this.browserTab.isAvailable()
        .then((isAvailable: boolean) => {

        if(isAvailable) {

            this.browserTab.openUrl('https://www.techiediaries.com');

        } else {

            // if custom tabs are not available you may  use InAppBrowser

        }

        });        
}
}

You can now add a button to trigger this method

<button ion-button (click)="openUrl()"> Open Techiediaries</button>

Conclusion


To test your application ,start by adding a target Android platform then build and run your app in a real mobile device .



mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.