@akylas/nativescript-inappbrowser
by akylas | v3.1.6
InAppBrowser for NativeScript
npm i --save @akylas/nativescript-inappbrowser

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

Methods Action
open Opens the url with Safari in a modal on iOS using SFSafariViewController, and Chrome in a new custom tab on Android. On iOS, the modal Safari will not share cookies with the system Safari.
close Dismisses the system's presented web browser.
openAuth Opens the url with Safari in a modal on iOS using SFAuthenticationSession/ASWebAuthenticationSession, and Chrome in a new custom tab on Android. On iOS, the user will be asked whether to allow the app to authenticate using the given url (OAuth flow with deep linking redirection).
closeAuth Dismisses the current authentication session.
isAvailable Detect if the device supports this plugin.

iOS Options

Property Description
dismissButtonStyle (String) The style of the dismiss button. [done/close/cancel]
preferredBarTintColor (String) The color to tint the background of the navigation bar and the toolbar. [white/#FFFFFF]
preferredControlTintColor (String) The color to tint the control buttons on the navigation bar and the toolbar. [gray/#808080]
readerMode (Boolean) A value that specifies whether Safari should enter Reader mode, if it is available. [true/false]
animated (Boolean) Animate the presentation. [true/false]
modalPresentationStyle (String) The presentation style for modally presented view controllers. [automatic/none/fullScreen/pageSheet/formSheet/currentContext/custom/overFullScreen/overCurrentContext/popover]
modalTransitionStyle (String) The transition style to use when presenting the view controller. [coverVertical/flipHorizontal/crossDissolve/partialCurl]
modalEnabled (Boolean) Present the SafariViewController modally or as push instead. [true/false]
enableBarCollapsing (Boolean) Determines whether the browser's tool bars will collapse or not. [true/false]
ephemeralWebSession (Boolean) Prevent re-use cookies of previous session (openAuth only) [true/false]

Android Options

Property Description
showTitle (Boolean) Sets whether the title should be shown in the custom tab. [true/false]
toolbarColor (String) Sets the toolbar color. [gray/#808080]
secondaryToolbarColor (String) Sets the color of the secondary toolbar. [white/#FFFFFF]
navigationBarColor (String) Sets the navigation bar color. [gray/#808080]
navigationBarDividerColor (String) Sets the navigation bar divider color. [white/#FFFFFF]
enableUrlBarHiding (Boolean) Enables the url bar to hide as the user scrolls down on the page. [true/false]
enableDefaultShare (Boolean) Adds a default share item to the menu. [true/false]
animations (Object) Sets the start and exit animations. [{ startEnter, startExit, endEnter, endExit }]
headers (Object) The data are key/value pairs, they will be sent in the HTTP request headers for the provided url. [{ 'Authorization': 'Bearer ...' }]
forceCloseOnRedirection (Boolean) Open Custom Tab in a new task to avoid issues redirecting back to app scheme. [true/false]
backButtonDrawableId (String) Sets a custom drawable instead of the X
browserPackage (String) Package name of a browser to be used to handle Custom Tabs.
showInRecents (Boolean) Determining whether browsed website should be shown as separate entry in Android recents/multitasking view. [true/false]

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.

<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>
<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 👍

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

jdnichollsc
Juan Nicholls

NathanaelA
Nathanael Anderson

Individuals

Credits 👍