use Cordova InAppBrowser Plugin with Ionic 5/Angular and Ionic Native to Open External URLs

use Cordova InAppBrowser Plugin with Ionic 5/Angular and Ionic Native to Open External URLs

In this post we will give you information about use Cordova InAppBrowser Plugin with Ionic 5/Angular and Ionic Native to Open External URLs. Hear we will give you detail about use Cordova InAppBrowser Plugin with Ionic 5/Angular and Ionic Native to Open External URLsAnd how to use it also give you demo for it if it is necessary.

In this tutorial, we’ll be learning how you can use the Cordova InAppBrowser plugin to open external URLs in Ionic 5/Angular applications or implement services which require webviews apps built for Android, iOS or Universal Windows Platform (UWP).

See a more detailed tutorial here:

Full Ionic 2/Ionic 3 mobile app with Ionic Native 3.x and InAppBrowser

So lets get started.

First head over to your terminal or command prompt, depending on which system you are using (Unix Like or Windows) then create a new Ionic 5/Angular project using the Ionic CLI v4:  $ ionic start InAppBrowserExampleDemo blank –type=angular

We are creating a project based on the blank template and Angular which will give us a starter app with one home page.

Next install the Cordova InAppBrowser and Ionic Native wrapper for InAppBrowser. 

The Ionic Native plugin or wrapper is the recommended way of using Cordova plugins since they provide us with a Promise based API, around the original Cordova plugins that make use of Callback function, which works seamlessly with Ionic 5/Angular.

$ ionic cordova plugin add cordova-plugin-inappbrowser --save$ npm install --save @ionic-native/in-app-browser 

After installing both the Cordova plugin and its wrapper, let’s register the InAppBrowser provider with the main app module.

Note: For more advanced, controllable and customizable in app browser you can use the Themable Brower which isa fork of InAppBrowser with advanced features.

You can find a tutorial explaining how to use Themeablebrowser via this link .

Use your favorite code editor/IDE to open the generated project:

$ cd InAppBrowserExampleDemo$ code .

Open src/app/app.module.ts then import and add InAppBrowser to providers list:

/* ... */import { InAppBrowser } from '@ionic-native/in-app-browser';import { MyApp } from './app.component';import { HomePage } from '../pages/home/home';@NgModule({declarations: [    MyApp,    HomePage],imports: [    BrowserModule,    IonicModule.forRoot(MyApp)],bootstrap: [IonicApp],entryComponents: [    MyApp,    HomePage],providers: [    StatusBar,    SplashScreen,    InAppBrowser,    {provide: ErrorHandler, useClass: IonicErrorHandler}]})export class AppModule {}

 That’s it! You are now ready to use the InAppBrowser, you just need to inject it in your component.

Open src/pages/home/home.ts then import InAppBrowser and inject it in the component constructor:

import { Component } from '@angular/core';import { InAppBrowser } from '@ionic-native/in-app-browser';@Component({selector: 'page-home',templateUrl: 'home.html'})export class HomePage {    constructor(private theInAppBrowser: InAppBrowser) {    }}

Now let’s open an external URL, say for example: https://onlinecode.org 

InAppBrowser provides us with three options, either use the system default browser to open the target URL; use the same webview used by Cordova to display/render our app or use a simple in app browser.

Let’s see how to implement the three options in our demo app.

Add three methods to our component:

openWithSystemBrowser(url : string);openWithInAppBrowser(url : string);openWithCordovaBrowser(url : string);

And here is the full implementation:

import { Component } from '@angular/core';import { InAppBrowser , InAppBrowserOptions } from '@ionic-native/in-app-browser';@Component({selector: 'page-home',templateUrl: 'home.html'})export class HomePage {options : InAppBrowserOptions = {    location : 'yes',//Or 'no'     hidden : 'no', //Or  'yes'    clearcache : 'yes',    clearsessioncache : 'yes',    zoom : 'yes',//Android only ,shows browser zoom controls     hardwareback : 'yes',    mediaPlaybackRequiresUserAction : 'no',    shouldPauseOnSuspend : 'no', //Android only     closebuttoncaption : 'Close', //iOS only    disallowoverscroll : 'no', //iOS only     toolbar : 'yes', //iOS only     enableViewportScale : 'no', //iOS only     allowInlineMediaPlayback : 'no',//iOS only     presentationstyle : 'pagesheet',//iOS only     fullscreen : 'yes',//Windows only    };constructor(private theInAppBrowser: InAppBrowser) {}public openWithSystemBrowser(url : string){    let target = "_system";    this.theInAppBrowser.create(url,target,this.options);}public openWithInAppBrowser(url : string){    let target = "_blank";    this.theInAppBrowser.create(url,target,this.options);}public openWithCordovaBrowser(url : string){    let target = "_self";    this.theInAppBrowser.create(url,target,this.options);}  }

The next thing is to add some buttons to invoke these three methods.

Open src/pages/home/home.html then add:

<ion-header><ion-navbar>    <ion-title>    InAppBrowser Example DEMO Ionic v3 anc Ionic CLI v3    </ion-title></ion-navbar></ion-header><ion-content padding>    <button ion-button (click)="openWithSystemBrowser('https://onlinecode.org')">Open with System browser</button>    <button ion-button (click)="openWithInAppBrowser('https://onlinecode.org')">Open with In App browser</button>    <button ion-button (click)="openWithCordovaBrowser('https://onlinecode.org')">Open with Cordova browser</button></ion-content>

For more information, you can visit these websites:

Ionic Native docs for InAppBrowser

The Cordova InAppBrowser GitHub repository

Conclusion

This is an updated tutorial for a previous tutorial I wrote on the same subject which makes use of the latest Ionic CLI 4 and Angular.


Hope this code and post will helped you for implement use Cordova InAppBrowser Plugin with Ionic 5/Angular and Ionic Native to Open External URLs. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US