Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shripalsoni04/nativescript-webview-interface

Plugin for bi-directional communication between webView and android/ios
https://github.com/shripalsoni04/nativescript-webview-interface

android ios nativescript webview

Last synced: 2 days ago
JSON representation

Plugin for bi-directional communication between webView and android/ios

Awesome Lists containing this project

README 

        
[![npm](https://img.shields.io/npm/v/nativescript-webview-interface.svg)](https://www.npmjs.com/package/nativescript-webview-interface)

[![npm](https://img.shields.io/npm/dt/nativescript-webview-interface.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-webview-interface)



# Nativescript-WebView-Interface

Nativescript Plugin for bi-directional communication between WebView and Android/iOS



## Installation

From the terminal, go to your app's root folder and execute:

```

tns plugin add nativescript-webview-interface

```



Once the plugin is installed, you need to copy plugin file for webView into your webView content folder.

e.g

```

cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/

```



## Usage

For a quick start, you can check this [Demo App](https://github.com/shripalsoni04/nativescript-webview-interface-demo) and [Blog Post](http://shripalsoni.com/blog/nativescript-webview-native-bi-directional-communication/).

If you are using this plugin with **Angular 2**, you can check this [angular version of the demo app](https://github.com/shripalsoni04/ns-ng-webview-interface-demo).



### Inside Native App



Insert a `web-view` somewhere in your page.

```xml



....



....



```



Initialize `WebViewInterface` Plugin in your javascript file.

```javascript

var webViewInterfaceModule = require('nativescript-webview-interface');

var oWebViewInterface;



function pageLoaded(args){

    page = args.object;

    setupWebViewInterface(page) 

}



// Initializes plugin with a webView

function setupWebViewInterface(page){

    var webView = page.getViewById('webView');

    oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');

}

```

**Note**: Please note in above example that, we have not set **src** in template and we have passed it in **constructor** of *WebViewInterface*. This is recommended way to use this plugin to avoid issue

of communication from web-view to android not working sometimes on some devices.



Use any [API Method](#native-app-api) of WebViewInterface Class

```javascript

function handleEventFromWebView(){

    oWebViewInterface.on('anyEvent', function(eventData){

        // perform action on event

    });

}



function emitEventToWebView(){

    oWebViewInterface.emit('anyEvent', eventData);

}



function callJSFunction(){

    oWebViewInterface.callJSFunction('functionName', args, function(result){

        

    });

}

```



If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded

```javascript

webView.on('loadFinished', (args) => {

    if (!args.error) {

        // emit event to webView or call JS function of webView

    }

});

```



### Inside WebView



Import `nativescript-webview-interface.js` in your html page.

```html



    

    

        

                

    



```



Use any [API Method](#webview-api) of `window.nsWebViewInterface` inside webview



```javascript

var oWebViewInterface = window.nsWebViewInterface;



// register listener for any event from native app

oWebViewInterface.on('anyEvent', function(eventData){

    

});



// emit event to native app

oWebViewInterface.emit('anyEvent', eventData);



// function which can be called by native app

window.functionCalledByNative = function(arg1, arg2){

    // do any processing

    return dataOrPromise;

}

```

## API



### Native App API



*Constructor:*



#### WebViewInterface(webView: WebView, src?: string)

**webView** is an instance of nativescript [web-view](https://docs.nativescript.org/cookbook/ui/web-view). 



**src** is the url/local path to be loaded in web-view. If it is set, then you don't need to set it in *src* attribute in xml file. For proper functioning of web-view to native communication on all device's it is **recommended** to set src here.



*API Methods of WebViewInterface Class:*



#### on(eventOrCmdName: string, callback: (eventData: any) => void): void

Use this method to assign listener to any event/command emitted from webView.



Callback will be executed with the data sent from webView in any format. 



#### off(eventOrCmdName: string, callback?: (eventData: any) => void): void

Use this method to de-register listener of any event/command emitted from webView.



If callback is not set, all the event listeners for this event will be de-registered.



#### emit(eventOrCmdName: string, data: any): void

Use this method to emit any event/command from native app to webView with data in any format.



#### callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void

Use this method to call to any javascript function in global scope in webView.



Arguments are optional. But if supplied, must be in array format.



If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.


If the function execution generates any error, the errorHandler will be called with the error.



#### destroy(): void

Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.



### WebView API



API Methods available in `window.nsWebViewInterface` global variable.



#### on(eventOrCmdName: string, callback: (eventData: any) => void): void

Use this method to assign listener to  any event/command emited from native app.



Callback will be executed with the data sent from native app in any format.



#### emit(eventOrCmdName: string, data: any): void 

Use this method to emit any event/command from webView to native app with data in any format.