jQM InAppBrowser App

Using the InAppBrowser API in a jQuery Mobile app

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 InAppBrowser plugin. The InAppBrowser plugin provides the ability to spawn a browser instance from the application.

The app will look like:

Apache Cordova (PhoneGap)

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

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

First, place an Input component on the page and rename it to link_source. Type a link (which will be used by default), into the Text field. Place a Button component on the page, and rename it to open_browser_button. Next, place a Radio component and rename it to browser_type_group.

Set _self as value for the first Radio button. Type Cordova WebView for the Text property, and rename the button to cordova_web_view. Check the Selected box.

Similarly, create two more Radio buttons.
For the second button, set:

Value_system, TextSystem browser, Namesystem_browser.

And for the third one:

Value_blank, TextInAppBrowser, Namein_app_browser.

Invoking from JavaScript

InAppBrowser can be invoked via JavaScript:

  1. Open the DESIGN tab.
  2. Select the open_browser_button, open the EVENTS tab, and add the following event: open_browser_button> Click > Run JavaScript.
  3. Add the following JavaScript:
var radioGroup = $('input[name=browser_type_group]:checked');
window.open(Apperyio('link_source').val(), radioGroup.val());
  1. Click Save.

Wrapping into Service

InAppBrowser can be also invoked via a service.

📘

Note

Don’t use both methods (Invoking from JavaScript and this one) at the same time.

Appery.io doesn’t have a predefined InAppBrowser component; instead, this example uses a Generic Service.

  1. From the Projects view: CREAYE NEW > Service > Generic (custom JavaScript implementation), enter name InAppBrowserService and click Create Service. The service will be listed under the Services folder.
  2. Open the service and go to the Request tab. Specify two parameters – link and browser_type.
  3. Go to the Settings tab and click Add custom implementation. Type InAppBrowser as name and click Create.
  4. You’ll see the default implementation. You’ll need to make some changes and add some code. Your custom implementation should look like:
Appery.InAppBrowser = Appery.createClass(null, {
    init : function(requestOptions) {
        this.__requestOptions = $.extend({}, requestOptions);
    },
    process : function(settings) {
        settings.beforeSend(settings);
        if (this.__requestOptions.echo) {
            settings.success(this.__requestOptions.echo);
        } else {
            window.open(settings.data.link, settings.data.browser_type);
            settings.success({});
        }
        settings.complete('success');
    }
});

Binding Service

  1. Open the DATA tab.
  2. For datasource, select Service > InAppBrowserService > Add. The InAppBrowser service will be added to the page. Name it in_app_browser_service.
  3. Create the following mapping for Before send event:
  1. Save.

Launching InAppBrowser

  1. Open the DESIGN tab.
  2. Select the button, open the EVENTS tab, and add the following event: open_browser_button> Click > Invoke service > in_app_browser_service, and click Save.

Testing App

Since we’re invoking a native component, this app needs to be tested as a hybrid app, or installed on the device.

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.