InAppBrowser for NativeScript

Provides access to the system's web browser and supports handling redirects

Chrome Custom Tabs for Android & SafariServices/AuthenticationServices for iOS.

Who is using InAppBrowser?

Do you want to see this package in action? Check these awesome projects, yay! 🎉

• Oxycar - Offers innovative ways to facilitate home-work journeys.
• Pegus Digital - Your innovation partner in digital product development.

Share your awesome project here! ❤️

Getting started

tns plugin add @akylas/nativescript-inappbrowser

Manual installation

• Android Platform with Android Support:

  Modify your android/build.gradle configuration:

  buildscript {
    ext {
      buildToolsVersion = "28.0.3"
      minSdkVersion = 16
      compileSdkVersion = 28
      targetSdkVersion = 28
      // Only using Android Support libraries
      supportLibVersion = "28.0.0"
    }

• Android Platform with AndroidX:

  Modify your android/build.gradle configuration:

  buildscript {
    ext {
      buildToolsVersion = "28.0.3"
      minSdkVersion = 16
      compileSdkVersion = 28
      targetSdkVersion = 28
      // Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
      androidXBrowser = "1.0.0"
      // Put here other AndroidX dependencies
    }

Usage

iOS Options

Android Options

Demo

import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from '@akylas/nativescript-inappbrowser';

...
  openLink = async () => {
    try {
      const url = 'https://www.proyecto26.com'
      if (await InAppBrowser.isAvailable()) {
        const result = await InAppBrowser.open(url, {
          // iOS Properties
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: '#453AA4',
          preferredControlTintColor: 'white',
          readerMode: false,
          animated: true,
          modalPresentationStyle: 'fullScreen',
          modalTransitionStyle: 'coverVertical',
          modalEnabled: true,
          enableBarCollapsing: false,
          // Android Properties
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          navigationBarColor: 'black',
          navigationBarDividerColor: 'white',
          enableUrlBarHiding: true,
          enableDefaultShare: true,
          forceCloseOnRedirection: false,
          // Specify full animation resource identifier(package:anim/name)
          // or only resource name(in case of animation bundled with app).
          animations: {
            startEnter: 'slide_in_right',
            startExit: 'slide_out_left',
            endEnter: 'slide_in_left',
            endExit: 'slide_out_right'
          },
          headers: {
            'my-custom-header': 'my custom header value'
          },
          hasBackButton: true,
          browserPackage: '',
          showInRecents: false
        });
        Dialogs.alert({
          title: 'Response',
          message: JSON.stringify(result),
          okButtonText: 'Ok'
        });
      }
      else {
        Utils.openUrl(url);
      }
    }
    catch(error) {
      Dialogs.alert({
        title: 'Error',
        message: error.message,
        okButtonText: 'Ok'
      });
    }
  }
...

Authentication Flow using Deep Linking

In order to redirect back to your application from a web browser, you must specify a unique URI to your app. To do this, define your app scheme and replace my-scheme and my-host with your info.

• Enable deep linking (Android) - AndroidManifest.xml

<activity
  ...
  android:launchMode="singleTask">
  <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="my-scheme" android:host="my-host" android:pathPrefix="" />
  </intent-filter>
</activity>

• Enable deep linking (iOS) - Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>my-scheme</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>my-scheme</string>
    </array>
  </dict>
</array>

• utilities.ts

export const getDeepLink = (path = "") => {
  const scheme = 'my-scheme';
  const prefix = global.isAndroid ? `${scheme}://my-host/` : `${scheme}://`;
  return prefix + path;
}

• home-page.ts

import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from '@akylas/nativescript-inappbrowser';
import { getDeepLink } from './utilities';
...
  async onLogin() {
    const deepLink = getDeepLink('callback')
    const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`
    try {
      if (await InAppBrowser.isAvailable()) {
        InAppBrowser.openAuth(url, deepLink, {
          // iOS Properties
          ephemeralWebSession: false,
          // Android Properties
          showTitle: false,
          enableUrlBarHiding: true,
          enableDefaultShare: false
        }).then((response) => {
          if (
            response.type === 'success' &&
            response.url
          ) {
            Utils.openUrl(response.url)
          }
        })
      } else Utils.openUrl(url)
    } catch {
      Utils.openUrl(url)
    }
  }
...

StatusBar

The StatusBar will keep the last one provided in your app. So if the StatusBar is dark-content before you open the browser this will keep it.

Authentication

Using in-app browser tabs (like SFAuthenticationSession/ASWebAuthenticationSession and Android Custom Tabs) where available. Embedded user-agents, known as web-views (like UIWebView and WKWebView), are explicitly not supported due to the usability and security reasons documented in Section 8.12 of RFC 8252.

Credits 👍

• React Native InAppBrowser: InAppBrowser for React Native

Contributing ✨

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated ❤️.
You can learn more about how you can contribute to this project in the contribution guide.

Contributors ✨

Please do contribute! Issues and pull requests are welcome.

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Collaborators

Juan Nicholls ✉	Nathanael Anderson ✉

Individuals

Credits 👍

• React Native InAppBrowser: InAppBrowser for React Native