cordova-plugin-browsertab

Note: This is not an official Google product.

About

This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically Custom Tabs on Android (including the Chrome Custom Tabs implementation), and SFSafariViewController on iOS.

Usage

To open a URL in an in-app browser tab on a compatible platform:

cordova.plugins.browsertab.openUrl('https://www.google.com');

This plugin is designed to complement cordova-plugin-inappbrowser. No fallback is triggered automatically, you need to test whether it will succeed, and then perform your own fallback logic like opening the link in the system browser instead using cordova-plugin-inappbrowser.

cordova.InAppBrowser.open('https://www.google.com/', '_system');

Complete example with fallback handling:

var testURL = 'https://www.google.com';

document.querySelector("#tabwithfallback").addEventListener('click', function(ev) {
cordova.plugins.browsertab.isAvailable(function(result) {
    if (!result) {
      cordova.InAppBrowser.open(testURL, '_system');
    } else {
      cordova.plugins.browsertab.openUrl(
          testURL,
          function(successResp) {},
          function(failureResp) {
            error.textContent = "failed to launch browser tab";
            error.style.display = '';
          });
    }
  },
  function(isAvailableError) {
    error.textContent = "failed to query availability of in-app browser tab";
    error.style.display = '';
  });
});

Customization

Plugin can be customized by providing parameters during installation. You can customize i.e. custom tab background color by passing CUSTOM_TAB_COLOR_RGB variable in string RGB format:

cordova plugin add cordova-plugin-browsertab --variable CUSTOM_TAB_COLOR_RGB="#ff0000"

List of available parameters:

• CUSTOM_TAB_COLOR_RGB - Customize custom tab background color. Pass value as a RGB string #RRGGBB. Supported by Android only at the moment.

Building

Install Cordova if you haven't already:

npm install -g cordova

Then from the root directory:

cd demo
cordova platform add ios
cordova run ios
cordova platform add android
cordova run android

Development

During development if you want to make changes to the plugin you need to force a rebuild and add the plugin from source, like so (from the demo directory):

cordova plugin remove cordova-plugin-browsertab
cordova plugin add ../plugin

To refresh the platform build:

cordova platform remove ios
cordova platform add ios

To set breakpoints, etc, open the project in the code editor:

cordova platform add ios
open platforms/ios/BrowserTabDemo.xcworkspace