# nativescript-advanced-webview

> An advanced webview using Chrome CustomTabs on Android and SFSafariViewController on iOS.

Latest version **7.0.2** (published 2023-01-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install nativescript-advanced-webview
pnpm add nativescript-advanced-webview
yarn add nativescript-advanced-webview
bun add nativescript-advanced-webview
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.0.2 |
| Published | 2023-01-31 |
| First published | 2016-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 62 |
| Author | Brad Martin |
| Maintainers | bradmartin |
| Keywords | NativeScript, nativescript-advanced-webview, Chrome Custom Tabs, SafariViewController, Safari, Chrome, BradMartin |

## Links

- npm: https://www.npmjs.com/package/nativescript-advanced-webview
- Repository: https://github.com/bradmartin/nativescript-advanced-webview
- Homepage: https://github.com/bradmartin/-advanced-webview
- Issues: https://github.com/bradmartin/nativescript-advanced-webview/issues
- npm.io page: https://npm.io/package/nativescript-advanced-webview

## Recent versions

- 7.0.2 (latest) — 2023-01-31
- 7.0.1 — 2022-01-27
- 7.0.0 — 2021-11-12
- 6.1.1 — 2021-04-05
- 6.1.0 — 2021-04-01
- 6.0.0 — 2020-09-23
- 5.0.0 — 2020-02-05
- 4.0.1 — 2019-08-29
- 4.0.0 — 2019-08-28
- 3.0.2 — 2018-09-15
- 3.0.1 — 2018-07-10
- 3.0.0 — 2018-07-10
- 2.0.3 — 2018-07-10
- 2.0.2 — 2018-03-05
- 2.0.1 — 2018-03-01
- … 8 more at https://npm.io/package/nativescript-advanced-webview/versions

## README

<a align="center" href="https://www.npmjs.com/package/nativescript-advanced-webview">
    <h3 align="center">NativeScript Advanced Webview</h3>
</a>
<h4 align="center">
An advanced webview using <a href="https://developer.chrome.com/multidevice/android/customtabs#whatarethey">Chrome Custom Tabs</a> on Android and <a href="https://developer.apple.com/reference/safariservices/sfsafariviewcontroller?language=objc">SFSafariViewController</a> on iOS.
</h4>

<p align="center">
    <a href="https://www.npmjs.com/package/nativescript-advanced-webview">
        <img src="https://img.shields.io/npm/v/nativescript-advanced-webview.svg" alt="npm">
    </a>
    <a href="https://www.npmjs.com/package/nativescript-advanced-webview">
        <img src="https://img.shields.io/npm/dt/nativescript-advanced-webview.svg?label=npm%20downloads" alt="npm">
    </a>
    <a href="https://github.com/bradmartin/nativescript-advanced-webview/stargazers">
        <img src="https://img.shields.io/github/stars/bradmartin/nativescript-advanced-webview.svg" alt="stars">
    </a>
</p>

## Installation

To install execute:

#### NativeScript 7+:

```bash
ns plugin add nativescript-advanced-webview
```

#### NativeScript < 7:

```bash
tns plugin add nativescript-advanced-webview@5.0.0
```

[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                                             |
| ----------------------------------------- | ----------------------------------------------- |
| ![Android Sample](screens/chromeTabs.gif) | ![iOS Sample](screens/safariViewController.gif) |

## 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';

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'
  };

  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`

---
_Source: https://npm.io/package/nativescript-advanced-webview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._