InAppBrowser

What are we going to build?

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

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io.

📘

Note

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

Ionic App

In an Ionic app, open the Apps page, enter an app name, and click Create. You’ll see a start page.

🚧

Important Note!

Note that the option of creating new apps with the Ionic framework was removed but we still support the projects that were created with it earlier.

Creating App UI

Design

1. Open your Appery.io Ionic or Bootstrap project or create a new one. You will get two default pages: index and Screen1.
2. Open Screen1 page and place the Button component on the page, then define its Text as Open link and ng-click as inappbrowser().
3. Drop the Input component on the page. Clear the Text field and, for the Placeholder, type in Enter URL.

📘

Note

You may also define the default site name, https://google.com, for example.

Define the ng-model as: m.link.
4. Now, place 3 Radiobuttons and set the following parameters for each:

• For the first Radiobutton, type In App Browser for Text, and define the ng-model as m.brtype and '_blank' as the ng-value.
• For the second Radiobutton: set Text to System Browser, ng-model – to m.brtype and ng-value – to '_system'.
• And for the third one: Text – Cordova Web View, ng-model – m.brtype and ng-value – '_self'.

This is how it should look like in a Bootstrap/AngularJS app:

Scope

1.Go to the SCOPE view of the Screen1 page and add a new function name – inappbrowser and click Add, opening the function editor.
2. In the editor, add the following code to the function:

if (window.cordova) {
  cordova.InAppBrowser.open($scope.m.link, $scope.m.brtype, 'location=yes');
} else {
  console.log('link:',$scope.m.link, '. brtype:', $scope.m.brtype);
}

3. Now, edit the init() function by adding the following:

$scope.m = {
    link: 'http://google.com',
    brtype: '_blank'
};

We’re invoking a native Cordova component here, so this the app have to be installed on a mobile device to test In App Browser functionality.

The final app will look like the following (Appery.io Bootstrap/AngularJS):

Testing Options

Android

Testing on Android is relatively simple, since you can quickly install any app on your device.
To do it, build the Android binary and install it on your device. When the build is completed, you’ll see a QR code. Scanning the QR code will download the app to your phone. You can also email the app to your device.

iOS

Build the app and install it on your device.

📘

Important Note

Please, note that to export the app for iOS, you will need to upload your distribution certificate and provisioning profile obtained from Apple under the App settings > iOS binary tab.
You can check this document in case you need help with exporting your application for iOS. Here, you will find the document that explains how to manage certificates in Appery.io.