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 .

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status