May 17, 2018

Using the Capacitor Browser API to open urls

In this tutorial, I want to show you how to integrate Capacitor Browser API into your Ionic project and how it will work in IOS app, Electron and in the Chrome browser.

Getting started

To follow this tutorial you should have the basic fundamentals of the command line, installed Node, Ionic, Capacitor, Live Server
All the following was done with the next requirements: Node v9.10.0, Ionic v3.20.0, Capacitor 1.0.0-alpha.x, Live Server v.1.2.0

Important: In this tutorial, we used Capacitor version Alpha, so it’s not production ready.

New project

In this step, you need to follow everything described in this official Capacitor doc. We will use the capacitorBrowserExample as appName (also for Ionic project too) and com.roma.capacitorBrowserExample as appId. On the step of adding platforms, we will add IOS and Electron.

Setup

Let’s go to the project folder and open the src/app/pages/home/home.ts file. We will include Capacitor Browser API to this component and create a simple method to open the specified URL.

Modify src/app/pages/home/home.ts to reflect the following:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Plugins } from '@capacitor/core';
const { Browser } = Plugins;

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

export class HomePage {
  url = 'https://akhromieiev.com';
  
  constructor(public navCtrl: NavController) {

  }

  async openURL(url){
    await Browser.open({'url': url});
  }
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Plugins } from '@capacitor/core';

const { Browser } = Plugins;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

url = 'https://akhromieiev.com';

constructor(public navCtrl: NavController) {

}

async openURL(url){

await Browser.open({'url': url});

}

Browser.open method (line 19) takes an object of BrowserOpenOptions interface. You can check more about in the official Capacitor doc.

Template

Our template will very simple. Just one input and button to call openURL method.

Modify src/app/pages/home/home.html to reflect the following:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-list>

    <ion-item>
      <ion-label fixed>URL</ion-label>
      <ion-input type="text" [(ngModel)]="url"></ion-input>
    </ion-item>
  </ion-list>

  <div padding>
    <button ion-button color="primary" block (click)="openURL(url)">Open URL</button>
  </div>

</ion-content>