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

ns plugin add 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 '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'
      });
    }
  }
...

Android Optimizations

On Android, you can warmup the in app browser client to make it launch siginificantly faster. To do so, add the following to your Custom Android Activity.

import { InAppBrowser } from "nativescript-inappbrowser";
@NativeClass()
@JavaProxy("org.nativescript.demo.MainActivity")
export class Activity extends androidx.appcompat.app.AppCompatActivity {
  public onStart(): void {
    // InAppBrowser initialization for CustomTabsServiceConnection
    InAppBrowser.onStart();
  }
}

You can further optimize performance and pre-render pages by providing the urls that the user is likely to open.

constructor() {
  super();
  // Do not call this every time the component render
  InAppBrowser.mayLaunchUrl(this._url, [
    "https://twitter.com/NativeScript",
    "https://github.com/NativeScript/NativeScript",
    "https://openjsf.org"
  ]);
}

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 '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 ✉

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too.

Donate Ethereum, ADA, BNB, SHIBA, USDT, DOGE:

Wallet address: 0x3F9fA8021B43ACe578C2352861Cf335449F33427

Please let us know your contributions! 🙏

Enterprise 💼

Available as part of the Tidelift Subscription.

The maintainers of InAppBrowser for NativeScript and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

Security contact information 🚨

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.

License ⚖️

This repository is available under the MIT License.

Happy coding 💯

Made with ❤️

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

Unreleased

3.2.0 - 2022-08-02

Added

• Add custom size option to iOS formSheet Modal by @ShaneMckenna23 (#91).
• Add includeReferrer to allow adding android package name as referrer for website to track by @vincent-paing (#95).
• Add warmup and mayLaunchUrl functions for optimization in Android by @vincent-paing (#97).

Fixed

• Complete migration to ns8 and fix build issues by @rigor789 (#92).
• Fix support for Metadata Filtering from Android by @jcassidyav (#93).
• Avoid stringifying null redirect url by @rmartin48 (#99).
• Fix auth redirection logic by @jdnichollsc (#100).

Removed

• Remove QUERY_ALL_PACKAGES permission by @edusperoni (#87).

3.1.2 - 2021-06-28

Fixed

• Fix README package distribution.

3.1.1 - 2021-06-28

Fixed

• Fix issues with navigationBarColor and navigationBarDividerColor Android options.

3.1.0 - 2021-06-27

Added

• Add navigationBarColor and navigationBarDividerColor options by @jdnichollsc.
• Add try catch block to Safari View Controller and ChromeTabs to validate the url.

Fixed

• Fix invalid scheme with iOS 14.5.
• Fix openAuth crashed when going to be closed and then press the cancel button.

3.0.2 - 2020-02-01

Fixed

• Fix wrong param passed to parseColor method by @ronalson (#56).

3.0.1 - 2020-11-30

Fixed

• Fix colors not working with instance of Color by @farfromrefug (#50).

3.0.0 - 2020-10-30

Added

• {N} 7 updates by @NathanWalker (#40).
• Added hasBackButton option to sets a back arrow instead of the default X icon to close the custom tab.
• Added default browser configuration for custom tab if any.
• Added browserPackage option to use a Package name of a browser to be used to handle Custom Tabs.
• Added showInRecents option to determine whether browsed website should be shown as separate entry in Android recents/multitasking view.

Fixed

• Android isAvailable method checks Custom Tab support.
• Added a null check for redirectResolve in safariViewControllerDidFinish.
• Fixed AppStateActiveOnce event listener.
• Disable swipe to dismiss gesture for modal.

2.3.0 - 2020-04-08

Added

• Added ephemeralWebSession option to supports ephemeralWebBrowserSession on iOS 13.
• Fix issue loading initial url from Android resume event for authentication purposes.

2.2.0 - 2019-11-14

Added

• Validate if the type of the auth result is different to cancel before to check the url of the last redirection from Android.

2.1.1 - 2019-11-14

Fixed

• Fixed issue about headers option not working from Android #16.

2.1.0 - 2019-11-13

Added

• Added support for automatic modal presentation style from iOS.
• Added enableBarCollapsing option to determines whether the browser's tool bars will collapse or not from iOS.

Fixed

• Fixed issue with ASWebAuthenticationSession to support iOS 13 by @cgoboncan-ebsi #14.
• Fixed Android Activity issue closing the browser and restoring the state by using onSaveInstanceState
• Fixed Android auth redirection by using AndroidApplication.activityResumedEvent.

2.0.0 - 2019-07-27

Added

• Android: Migrate to AndroidX by @jdnichollsc (3e7ca9a).
• Include a CHANGELOG.md to see the history of the changes of the project.
• Activating Open Collective and Create CONTRIBUTING.md to see how to contribute.
• Added animated, modalPresentationStyle and modalTransitionStyle properties for iOS options.
• Present the SafariViewController modally or as push instead using the modalEnabled property.
• Add workaround to dismiss SafariViewController without animation.

BREAKING CHANGES

• Android: You are required to only use either the Support Library or AndroidX for your dependencies. If you need to migrate this library back to the support library, or another library forward to AndroidX, then take a look at the Jetifier tool.

1.0.0 - 2019-05-06

Added

• Create InAppBrowser for NativeScript library inspired by React Native InAppBrowser.
• Default methods to open and close the embedded browser (open, close) with options.
• Methods to open and close external urls to authenticate the user (openAuth, closeAuth) using deep linking.
• isAvailable method to detect if the device supports the plugin.