Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    Latest Updates

InAppBrowser

Using the InAppBrowser API

What are we going to build?

In this tutorial, you’ll learn how to build an app that navigates to a web page via various methods of the Apache Cordova API as a preconfigured native service.
The InAppBrowser plug-in 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.

Creating a new app

Create a new app in the app builder. From the Apps page, enter an app name and click Create. You’ll see a start page.

Creating the 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.

  1. 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.

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

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app. You can find it in the Google Play Store.
  2. Build the Android binary and install it 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

iOS options:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app.
  2. Build the app and install it on your device.

InAppBrowser


Using the InAppBrowser API

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.