INTRODUCTION
In this tutorial, we'll learn how to use the cordova InAppBrowser plugin in an Ionic 4/5 Framework app.
- Step 1 — We will create Ionic/Angular application
- Step 2 — Setup InAppBrowser plugin in Ionic/Angular
- Step 3— Use InAppBrowser Plugin In App
- Step 4 — Build apk from Ionic/Angular application & test on android
- Step 5— Multiple InAppBrowser Plugin Features in Ionic/Angular
STEP 1 — Lets create Ionic/Angular application
Ionic and Cordova cli latest version needs to be installed in your local machine to work Ionic properly, Along with that let’s go & create an blank Ionic Framework application app now.
First, we have to know some basic knowledge of using cmd. Open your CMD or terminal in your machine & navigate to the directory or location where you want to create basic ionic angular application. You can look at the below command and it might will helpful you to navigate through cmd.
So creating a basic application in ionic/angular is very simple take a look at the below command and copy and paste in your terminal or cmd. Replace "ionicAppName" with your project name.
After this, Your Ionic/Angular application will be created and will be ready to start work in this directory . But you first need to navigate to application directory through the below command.
Now we have successfully created an Ionic 4 app, Now we need to install InAppBrowser plugin in our Ionic/Angular project to use it. Now to install InAppBrowser plugin in our project, run these command which are shown in next section in your favorite terminal:
Install InAppBrowser
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser
Now that the InAppBrowser plugin has been added to our app. Now, we need to import it into the app.module.ts file before we can use it in our application.
In the app.module.ts file, import the InAppBrowser and add it into the providers.
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
InAppBrowser // Set InAppBrowser here
],
All done! You can now use the InAppBrowser; all you have to do is "inject" it into your component.
Let's move on to the page in your project where you want to use this plugin. Open src/pages/home/home.ts, then import InAppBrowser and put 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(public inAppBrowser: InAppBrowser) {
}
}
Now let's open an external URL, for example: https://ionictemplates.blogspot.com
InAppBrowser gives us three options for opening the target URL: use the system's default browser, use the same Webview that Cordova uses to show our app, or use a simple in-app browser.
Let's see how the three options can be used in our demo app.
Our component needs three more methods:
openWithSystemBrowser(url: string); // url type string
openWithInAppBrowser(url: string); // type string
openWithCordovaBrowser(url: string); // string
And here is the full code implementation:
import { Component } from '@angular/core';
import { InAppBrowserOptions, InAppBrowser } from '@ionic-native/in-app-browser';
@Component({
selector: 'app-home',
templateUrl: './home.page.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 inAppBrowser: InAppBrowser) {
}
openWithSystemBrowser(url : string){
let target = '_system';
this.inAppBrowser.create(url, target, this.options);
}
openWithInAppBrowser(url : string){
let target = '_blank';
this.inAppBrowser.create(url, target, this.options);
}
openWithCordovaBrowser(url : string){
let target = '_self';
this.inAppBrowser.create(url, target, this.options);
}
}
Now that we've added some methods to home.ts file, we need to add some buttons that can be used to call these three methods. Go to the.html file and change the following code:
Open src/pages/home/home.html and add these lines:
<ion-header>
<ion-navbar>
<ion-title>
Ionic/Angular InAppBrowser Example
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="ion-padding">
<ion-button (click)="openWithSystemBrowser('https://ionictemplates.blogspot.com')">Open with System browser</ion-button>
<ion-button (click)="openWithInAppBrowser('https://ionictemplates.blogspot.com')">Open with In App browser</ion-button>
<ion-button (click)="openWithCordovaBrowser('https://ionictemplates.blogspot.com')">Open with Cordova browser</ion-button>
</ion-content>
So, this is the end. Now that we've successfully merged,
Publish Your App:
Use the following command to send it to your phone.
ionic cordova platform add android
ionic cordova run android --aot
You just need to run the below commands to build your ionic/angular. It will build an APK file which you can run on your android device and test it. Also you can replace "ios" with "android" to build for IOS.
Conclusion
Finally, Ionic 5 Cordova InAppBrowser plugin tutorial has been over. Make sure to Subscribe us on YouTube for more.