Menu

Usar el plugin InAppBrowser en Ionic

demoscordovapluginnative - June 13, 2017 por Edy Avendaño Pacheco
ionic3.3.0ionic-native3.12.1ionic-app-scripts1.3.7cordova-cli7.0.1ionic-cli3.3.0

Ionic Framework nos ofrece soporte para los plugins de apache cordova, en la paqueteria ionic-native, lo cual nos proporciona una interfaz para poder utilizarlo en nuestro proyecto.

En este ejemplo aprenderemos a utilizar el plugin InAppBrowser, basicamente este plugin nos permite abrir un link ya sea en el navegador(si utilizamos ionic serve) o en el navegador del dispositivo si estamos utilizando alguna plataforma como android o IOS.

Antes que nada debemos tener nuestro ambiente configurado, es decir tener el cli de ionic, si tienes dudas te dejo el link de Instalación

Paso 1: Iniciando el proyecto

Iniciaremos nuestro proyecto utilizando el siguiente comando

ionic start ionic-inappbrowser blank

Paso 2: Añadiendo el plugin InAppBrowser

Para esto ejecutaremos el siguiente comando, que instala el plugin de cordova

ionic cordova plugin add cordova-plugin-inappbrowser

Nos pedira que instalemos el plugin de cordova, le decimos que si como en la siguiente imagen:

Luego añadimos la libreria de ionic native

npm install --save @ionic-native/in-app-browser

No ocuparemos añadir alguna plataforma porque este plugin funciona en el navegador.

Paso 3: Inyectando el provider en el archivo app.module

Por este momento evitare usar la funcion de Lazy Loading ya que por experiencia personal, le falta algunos detalles por pulir y que llega a generar ciertos errores, espero que en la proximas versiones estos queden solucionados.

Abrimos el archivo app.module.ts, y añadimos el provider InAppBrowser

...
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
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: [
    InAppBrowser,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Paso 4: Realizando la logica del plugin

Ahora que ya añadimos el provider, procederemos a inyectarlo en el constructor de la clase HomePage en el archivo home.ts.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';

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

  constructor(
    public navCtrl: NavController,
    private iap: InAppBrowser
  ) {
  }
}

Ahora en la clase HomePage creamos una funcion llamada openLink, y utilizamos la funcion create del objeto “iab”, pasandole como primer parametro la dirección que queremos abrir, y como segundo parametro el destino, en este caso que lo abra en una pagina en blanco

openLink(){
  this.iab.create("https://www.ion-book.com/","_blank");
}

Ahora en el archivo home.html, agregamos un botón, y en el evento click invocamos a la función creada anteriormente.

<ion-content padding>
  <p>Usando el plugin in-app-browser</p>
  <button ion-button color="primary" (click)="openLink()">Abrir link</button>
</ion-content>

y ya con esto al dar click en el botón nos abrirá el link que definimos.

En el repo de github enontraran el proyecto completo.

Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

Y luego

ionic cordova prepare

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!