nativescript-webview-ext2

Extended WebView for NativeScript which adds "x-local"-custom-scheme for loading local-files, handle events between WebView and NativeScript, JavaScript execution, injecting CSS and JS-files. Supports Android 19+ and iOS9+.

NOTE: This extends and updates the excellent: https://github.com/Notalib/nativescript-webview-ext

npm install nativescript-webview-ext2

Features

• Adds a custom-scheme handler for x-local:// to the webview for loading of resources inside the webview.
  • Note: This is not supported on iOS <11
• 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.
• Two-Way event listeners between NativeScript and WebView
  • From NativeScript to WebView
  • From WebView to NativeScript
• Adds functions to inject css- and javascript-files.
  • Into the current page.
  • Auto-injected on page load.
• Polyfills:
  • Promise
  • Fetch API (overrides Native API on Android to support x-local:// and file://)
• Allows alert, confirm and prompt with WkWebView.
• Supports:
  • Android 19+
  • iOS 11+: Full support
  • iOS <11: Partial support

Update minSdkVersion to 19 or higher

Android SDK 19 is required, update App_Resources/Android/app.gradle:

android {
  defaultConfig {
    minSdkVersion 19 // change this line
    generatedDensities = []
  }
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

Core support

Load in template like this:

<Page class="page" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:nota="nativescript-webview-ext2">
    <ActionBar class="action-bar">
        <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>

    <nota:WebViewExt src="https://nota.dk"></<nota:WebViewExt>
</Page>

Angular support

Import WebViewExtModule from nativescript-webview-ext2/angular and add it to your NgModule.

This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

Vue support

Import nativescript-webview-ext2/vue in your app entry file (likely app.js or main.js).

This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

Usage

Limitations

The custom-scheme handler for x-local:// is only supported by Android and iOS 11+

Custom-scheme support for iOS <11 was removed because of ITMS-90809.

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.

Waiting for nsWebViewBridge to be available

    window.addEventListener("ns-bridge-ready", function(e) {
        var nsWebViewBridge = e.detail || window.nsWebViewBridge;

        // do stuff here
    });

iOS disable zoom

    webview.on(WebViewExt.loadFinishedEvent, (args) => {
        webview.executeJavaScript(`
            (meta => {
                meta.setAttribute('name', 'viewport');
                meta.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
                document.getElementsByTagName('head')[0].appendChild(meta);
            })(document.createElement('meta'));
        `);
    });

Possible features to come:

• Cookie helpers?
• Share cache with native-layer?

Android

• Settings
  • AppCache?
  • User agent?

iOS

• Settings?

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.

License

Apache License Version 2.0