Ionic 5 InAppBrowser App Tutorial

Using the InAppBrowser API in an Ionic 5 app

Introduction

In this tutorial, you’ll learn how to build an Ionic 5 app that navigates to a web page via various methods of the Apache CordovaAPI as a preconfigured native service. The InAppBrowser plug-in provides the ability to spawn a browser instance from the application.

The app will look like this:

📘

Want to know more?

To learn more about the component, and any other settings and options, please go to the InAppBrowser documentation page.

Creating App

First, let`s create a new app in the App Builder.
From the Apps tab, click the Create new app button, select Ionic 5 > Blank, then enter an app name and click Create:

Creating App UI

  1. First, open the Screen 1 DESIGN panel and to make the app UI more well-round, click on the Toolbar title in the app screen and change it to Ionic 5 InApp Browser App by changing the Text property under the PROPERTIES panel menu:
  1. Now, select the Page component from the breadcrumbs (you can also use the OUTLINE view to locate the needed component) and set the page Footer property to False as we will not use it in the app (you will also be asked to confirm changing the property):
  1. Now, drag & drop the Input component to the editor.
  2. Under the PROPERTIES panel menu, change its Placeholder property to Enter URL and set its Item Wrapped property to False:
  1. Now, place the RadioGroup component and set the following parameters for each Radiobutton:
  • For Radiobutton1, type In App Browser for its Label > Text property, and define the component's Value as _blank.
  • For Radiobutton2: set the Label > Text to System Browser, Value – to _system.
  • And for Radiobutton3: set Label > Text property to Cordova Web View and Value property to _self:
  1. To finish with the app UI, place the Button component on the page, then define its Text property as Open link:

Defining App Logic

  1. Go to Project > App settings > Cordova plugins and enable the InAppBrowser plug-in checkbox under the Core Cordova Plugins tab:
  1. Go back to the Screen1 page, open its CODE panel, and add two variables - url and type, both of String type:
  1. Now, switch to the page DESIGN panel and set url as the [(ngModel)] property of the Input component:
  1. Now, enter type for the [(ngModel)] property value of the RadioGroup component:
  1. Next, unfold the EVENTS tab from the page bottom and for the Open Link button Click event, select the Run TypeScript from the drop-down list.
  2. Then, in the editor, add the following code and save the event:
if (( < any > window).cordova) {
  ( < any > window).cordova.InAppBrowser.open(this.url, this.type , 'location=yes');
} else {
   console.log('ok');
}
  1. Click the SAVE button in the App Builder Toolbar to save the app.

App Testing

We’re invoking a native Cordova component here, so the app has to be installed on a mobile device to test the In App Browser functionality.
So, you will need to export the app as an Android binary by clicking EXPORT > Android Binary (both iOS and Android options are available) in the top menu to install it on your device:

Here is how the app performs on an Android device:

👍

Important Note!

Please note that you will need to generate the iOS certificate with the In-App Purchase capability to build an .ipa file.
You can check this document in case you need help with exporting your application for iOS.
Here, you will find information on generating certificates for Android.
Note as well that starting from August 2021, new apps are required to publish with the Android App Bundle (.aab) on Google Play.
Please read more here.
You can also check this Appery.io YouTube video that shows how to create Android and iOS certificates:


Did this page help you?