Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bradmartin/nativescript-advanced-webview
NativeScript plugin for Chrome CustomTabs on Android and SafariViewController on iOS.
https://github.com/bradmartin/nativescript-advanced-webview
android chrome-custom-tabs chrome-customtabs customtabs ios nativescript nativescript-plugin sfsafariviewcontroller webview
Last synced: 7 days ago
JSON representation
NativeScript plugin for Chrome CustomTabs on Android and SafariViewController on iOS.
- Host: GitHub
- URL: https://github.com/bradmartin/nativescript-advanced-webview
- Owner: bradmartin
- License: other
- Created: 2016-09-05T21:51:32.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-31T15:39:39.000Z (over 1 year ago)
- Last Synced: 2024-04-13T22:28:10.091Z (6 months ago)
- Topics: android, chrome-custom-tabs, chrome-customtabs, customtabs, ios, nativescript, nativescript-plugin, sfsafariviewcontroller, webview
- Language: TypeScript
- Homepage:
- Size: 7.88 MB
- Stars: 58
- Watchers: 4
- Forks: 28
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
An advanced webview using Chrome Custom Tabs on Android and SFSafariViewController on iOS.
## Installation
To install execute:
#### NativeScript 7+:
```bash
ns plugin add nativescript-advanced-webview
```
#### NativeScript < 7:
```bash
tns plugin add [email protected]
```
[Here is a video](https://youtu.be/LVseK_CZp5g) showing off Chrome CustomTabs in NativeScript.
#### Android
[CustomTabs](https://developer.android.com/reference/android/support/customtabs/package-summary.html)
#### iOS
[SFSafariViewController](https://developer.apple.com/reference/safariservices/sfsafariviewcontroller?language=objc)
### Why use this? Because Perf Matters
[Android Comparison](https://developer.chrome.com/multidevice/images/customtab/performance.gif)
### Demo
| Android | iOS |
| ----------------------------------------- | ----------------------------------------------- |
|  |  |
## Example
#### TypeScript
Initiate the service before the app starts e.g app.ts, main.ts
```typescript
import { init } from 'nativescript-advanced-webview';
init();
```
```typescript
import {
AdvancedWebviewEvents,
AdvancedWebViewOptions,
init,
NSAdvancedWebViewEventEmitter,
openAdvancedUrl
} from 'nativescript-advanced-webview';
import { getRootView } from '@nativescript/core/application';
function whateverYouLike() {
NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadStarted, () => {
console.log('LOAD STARTED');
});
NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadFinished, () => {
console.log('LOAD FINISHED');
});
NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadError, () => {
console.log('LOAD ERROR');
});
NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.Closed, () => {
console.log('CLOSED');
});
const opts: AdvancedWebViewOptions = {
url: 'https://nativescript.org',
showTitle: true,
toolbarColor: '#336699',
toolbarControlsColor: '#fff',
ios: {
viewController: getRootView().viewController
}
};
openAdvancedUrl(opts);
}
```
### API
- openAdvancedUrl(options: AdvancedWebViewOptions)
- close() _ iOS Only _ :: Closed the safari view controller.
#### AdvancedWebViewOptions Properties
- url: string
- toolbarColor: string
- toolbarControlsColor: string - ** iOS only **
- showTitle: boolean - ** Android only **
#### Events
- LoadStart
- LoadFinished
- LoadError
- Closed
##### Demo App
- fork the repo
- cd into the `src` directory
- execute `npm run demo.android` or `npm run demo.ios`