Tutorial Ionic - Cara membuat Web View (in App Browser)

Pada tutorial kali ini, kita akan membuat aplikasi web view. Dari website yang sudah ada dijadikan seperti aplikasi android.

Ayo kita mulai.

Pertama kita buat project kosong dahulu.

ionic start inAppBrowser blank

Kemudian kita membutuhkan platform untuk aplikasi kita. Disini kita mentargetkan android platform.

ionic platform add android 

Kemudian, tambahkan plugin cordova inAppBrowser.

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

Buka src/app/app.module.ts kemudian import dan add InAppBrowser ke providers:

/* ... */
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 {}

Udah, itu saja!
Sekarang plugin cordova inAppBrowser sudah bisa kita gunakan.

Buka src/pages/home/home.ts kemudian import InAppBrowser dan inject 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) {
    }
}

Searang buka external URL, sebagai contoh: https://www.blog.brilliansolution.com

InAppBrowser memberian tiga pilihan, menggunakan sistem default untuk membuka URL; menggunaan webview yang sama untu merender aplikasi atau menggunaan app browser sederhana.

Mari kita coba ketiga pilihan di aplikasi demo kita.
Tambahkan tiga methods ke component kita:

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

Ini implementasi lengkapnya:

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);
}
}

Selanjutnya, yang harus kita lakukan adalah menambahkan suatu button untuk membuka tampilan aplikasi kita.
Buka src/pages/home/home.html kemudian tambahkan:

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

Untuk informasi lebih lanjut, Anda dapat melihat pada dokumentasi resminya:
Ionic Native docs for InAppBrowser
The Cordova InAppBrowser GitHub repository