NativeScript inAppBrowser plugin (open Browser inside the app)

[sputn1k]

Is there a plugin available for NativeScript that handles Browser Shell launching like inappbrowser plugin for Cordova? (sorry can't find anything anywhere apart from "nativescript-openurl") Thanks

[NickIliev]

@sputn1k You could use WebView or nativescript-webview-interface or even the openUrl method from utils.

Closing the issue as how-to related.

[sputn1k]

This is a Feature request not a how-to related.

nativescript-webview-interface and openUrl functionality does not provide the same functionality as Cordova inappbrowser plugin.

Need a way to launch the device browser with the Shell like inappbrowser does? as I am in the process of building a OAuth 1.0a plugin for NativeScript.

[NickIliev]

@sputn1k I haven't used Cordova so I am not aware of the inappbrowser functionalities - can you clarify what you mean by launch the device browser with the Shell? What functionality are you missing in WebView (Cordova is basically a WebVIew interface)?

As a side note when opening a feature request please fulfill the requirements needed for opening one:

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

[sputn1k]

Yeah sorry, I wasn't clear (I clicked the add Feature request thought it would tag the post).

InAppBrowser opens a Native Browser Window inside the App (including the browser shell/bezel etc). That's the functionality, also you have control over closing and opening the Browser window inside the app - It's not a webview integrated in the screen/page.

Does NativeScript have a launch window inside the app function?

[NickIliev]

@sputn1k I am not aware of existing plugin apart from the WebView implementations. Marking this one as a feature request so anyone that has ideas for is interested can contribute (by creating own plugin or even enhance the NativeScript modules)

[sputn1k]

@NickIliev great thank you.

[shiv19]

@sputn1k this sounds like a job for
https://market.nativescript.org/plugins/nativescript-advanced-webview

[sputn1k]

@shiv19 thanks allot I couldn’t find anything like that cheers

[shiv19]

@sputn1k @NickIliev
This issue can be closed now. As the desired result is achievable with nativescript-advanced-webview

Cheers!

[jdnichollsc]

I'm not sure, we need more options from NativeScript, for example for authentication purposes using deep linking, like this https://github.com/proyecto26/react-native-inappbrowser#usage

[jdnichollsc]

@NickIliev WebViews are explicitly not supported for authentication purposes (OAuth client implementations) due to the security and usability reasons explained in Section 8.12 of RFC 8252
For more details you can see here https://tools.ietf.org/html/rfc8252

[sputn1k]

I need OAuth support with the webview. Thanks @nicklliev for sharing more detail I haven’t got that far in. Looking like NativeScript is lacking some serious deep functionality certain things are not developed yet and taking longer to implement. Hoping they get this sorted ASAP as now I’m wishing I used react native to build this project.

[jdnichollsc]

@sputn1k again, you can't use webview to support OAuth. In the case of React Native, I created that library for the same reason... I would love to help build a better plugin for NativeScript, is there a community like React Native Community to be part of it?

[sputn1k]

@jdnichollsc make your own repo or contribute directly to nativeScript-advanced-webview plugin.

[styxali]

@sputn1k I am using this https://www.nsplugins.com/plugin/@nota-nativescript-webview-ext
But i am still not sure it's a total features-clone of the inappbrowser

[NathanaelA]

@jdnichollsc - Juan, their is a decent community for doing plugins. Send me an email and I can point you in a couple directions for how to get plugged in to doing plugins. ;-)

[jdnichollsc]

Ok guys, InAppBrowser for NativeScript is here! 🙌 https://github.com/proyecto26/nativescript-inappbrowser

[jdnichollsc]

@NathanaelA thanks for your comments, your help was awesome! 💯

[sputn1k]

Ok guys, InAppBrowser for NativeScript is here! 🙌 https://github.com/proyecto26/nativescript-inappbrowser

Thanks! I will try it out and let you know how it works ;)

[prakashksp20]

headers set is not working InAppBrowser for NativeScript . Anyone know how to set headers in Inappbrowser plugin in nativescript?

[jdnichollsc]

@prakashksp20 headers option only works from Android (Chrome CustomTabs) :)

[prakashksp20]

@prakashksp20 headers option only works from Android (Chrome CustomTabs) :)

headers option is not working in Andriod (Chrome CustomTabs).

[jdnichollsc]

so please use the repo of the plugin to publish the issue with the details of your error 👍

[prakashksp20]

so please use the repo of the plugin to publish the issue with the details of your error

my code with headers is below:
private _url: string;

constructor() {
super();
this.token= JSON.parse(getString("token"));
// Initialize default values.
this._url = 'www.example.com/api/auth';
console.log(this.token);
}

get url(): string {
return this._url;
}

set url(value: string) {
if (this._url !== value) {
this._url = value;
this.notifyPropertyChange('url', value);
}
}

sleep(timeout) {
return new Promise(resolve => setTimeout(resolve, timeout));
}

openLink = async () => {
console.log(this.token);
try {
const { url } = this;
if (await InAppBrowser.isAvailable()) {
const result = await InAppBrowser.open(url, {
// iOS Properties
dismissButtonStyle: 'cancel',
preferredBarTintColor: '#453AA4',
preferredControlTintColor: 'white',
readerMode: false,
animated: true,
modalPresentationStyle: 'overFullScreen',
modalTransitionStyle: 'partialCurl',
modalEnabled: true,
// Android Properties
showTitle: true,
toolbarColor: '#6200EE',
secondaryToolbarColor: 'black',
enableUrlBarHiding: true,
enableDefaultShare: true,
forceCloseOnRedirection: true,
// 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: {
'Authorization': this.token
}
});
await this.sleep(800);
alert({
title: 'Response',
message: JSON.stringify(result),
okButtonText: 'Ok'
});
}
else {
openUrl(url);
}
}
catch (error) {
alert({
title: 'Error',
message: error.message,
okButtonText: 'Ok'
});
}
}

output above url is load but unautherized that url error is thrown.

[jdnichollsc]

If you need help, this is the repo of the plugin => https://github.com/proyecto26/nativescript-inappbrowser/issues

[cding45]

Does this plugin provide a function to run javescript in side the browser as cordova inappbrowser plugin, something like this: this.browser.executeScript({code: myCode}) so user can submit a form in the browser with the app's data once the form is loaded in the browser; It would be nice to have events like onExit, onLoad, etc