Extended WebView for NativeScript which adds many options. The code is originally based on nativescript-webview-ext

Features

• Adds a custom-scheme handler for x-local:// to the webview for loading of resources inside the webview.

  • Note: For iOS 11+ WKWebView is used, but for iOS <11 UIWebView is used

• Adds support for capturing URLs.

  • This allows the app to open external links in an external browser and handle tel-links

• Added functions like:

  • executeJavaScript(code: string) for executing JavaScript-code and getting result.
  • executePromise(code: string) for calling promises and getting the result.
  • getTitle() returns document.title.

• Adds functions to inject css- and javascript-files.

  • Into the current page.
  • Auto-injected on page load.

• Supports:

  • Android 19+
  • iOS 9+

Installation

Describe your plugin installation steps. Ideally it would be something like:

tns plugin add @nativescript-community/ui-webview

Angular support

Import AWebViewModule from @nativescript-community/ui-webview/angular and add it to your NgModule.

This registers the element AWebView. Replace the tag with

Vue support

import Vue from 'nativescript-vue';
import WebViewPlugin from '@nativescript-community/ui-webview/vue';

Vue.use(WebViewPlugin);

This registers the element AWebView. Replace the tag with

Usage

Limitations

In order to intercept requests for the custom scheme, we use UIWebView for iOS 9 and 10 and WKWebView for iOS 11+.

iOS 11 added support for setting a WKURLSchemeHandler on the WKWebView. Prior to iOS 11 there isn't support for intercepting the URL with WKWebView, so we use a custom NSURLProtocol + UIWebView.

Important:

The custom NSURLProtocol used with UIWebView is shared with all instances of the AWebView, so mapping x-local://local-filename.js => file://app/full/path/local-filename.js is shared between them.

API

NativeScript View

Events

WebView

Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView. Note: The bridge will only be available DOMContentLoaded or onload inside the WebView.

Possible features to come:

• Cookie helpers?
• Setting view-port metadata?
• Share cache with native-layer?

Android

• Settings
  • AppCache?
  • User agent?

iOS

• Settings?

Demo and unit tests

Running the demo

To run the demo-project, the plugin must be build locally and a http-server must be running.

The easiest way to run the demo is to follow these steps:

• Clone the git repository from https://github.com/nativescript-community/ui-webview.git
• Go into the src-folder
• Use the npm-scripts:
  • npm run demo.ios
  • npm run demo.android

Running the unit-tests

• Clone the git repository from https://github.com/nativescript-community/ui-webview.git
• Go into the src-folder
• Use the npm-scripts:
  • npm run test.ios
  • npm run test.android

License

Apache License Version 2.0, January 2004

About Nota

Nota is the Danish Library and Expertise Center for people with print disabilities. To become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired. Our purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

NativeScript WebView RTC

A NativeScript Plugin to add webRTC support to @nativescript-community/ui-webview

Installation

Run the following command from the root of your project:

tns plugin add @nativescript-community/ui-webview-rtc

This command automatically installs the necessary files, as well as stores @nativescript-community/ui-webview-rtc as a dependency in your project's package.json file.

Configuration

To install the plugin run

import install from '@nativescript-community/ui-webview-rtc';
install();

then simply use the webRTC="true" as a webview property