{"id":15018576,"url":"https://github.com/shripalsoni04/nativescript-webview-interface","last_synced_at":"2025-04-07T16:18:35.837Z","repository":{"id":56004195,"uuid":"50688791","full_name":"shripalsoni04/nativescript-webview-interface","owner":"shripalsoni04","description":"Plugin for bi-directional communication between webView and android/ios","archived":false,"fork":false,"pushed_at":"2024-03-07T17:39:16.000Z","size":44,"stargazers_count":89,"open_issues_count":24,"forks_count":35,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T14:11:29.731Z","etag":null,"topics":["android","ios","nativescript","webview"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shripalsoni04.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-29T20:19:10.000Z","updated_at":"2024-10-29T13:48:44.000Z","dependencies_parsed_at":"2022-08-15T11:10:45.725Z","dependency_job_id":"f70b8f28-5ff9-419a-acae-dcc469d29c6b","html_url":"https://github.com/shripalsoni04/nativescript-webview-interface","commit_stats":{"total_commits":59,"total_committers":8,"mean_commits":7.375,"dds":0.6101694915254237,"last_synced_commit":"21321ce8391e2b63c79d636a8b288a0d25fe0026"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shripalsoni04%2Fnativescript-webview-interface","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shripalsoni04%2Fnativescript-webview-interface/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shripalsoni04%2Fnativescript-webview-interface/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shripalsoni04%2Fnativescript-webview-interface/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shripalsoni04","download_url":"https://codeload.github.com/shripalsoni04/nativescript-webview-interface/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247685628,"owners_count":20979085,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","nativescript","webview"],"created_at":"2024-09-24T19:52:08.230Z","updated_at":"2025-04-07T16:18:35.815Z","avatar_url":"https://github.com/shripalsoni04.png","language":"JavaScript","readme":"[![npm](https://img.shields.io/npm/v/nativescript-webview-interface.svg)](https://www.npmjs.com/package/nativescript-webview-interface)\n[![npm](https://img.shields.io/npm/dt/nativescript-webview-interface.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-webview-interface)\n\n# Nativescript-WebView-Interface\nNativescript Plugin for bi-directional communication between WebView and Android/iOS\n\n## Installation\nFrom the terminal, go to your app's root folder and execute:\n```\ntns plugin add nativescript-webview-interface\n```\n\nOnce the plugin is installed, you need to copy plugin file for webView into your webView content folder.\ne.g\n```\ncp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/\n```\n\n## Usage\nFor 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/).\nIf 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).\n\n### Inside Native App\n\nInsert a `web-view` somewhere in your page.\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\"\u003e\n....\n\u003cweb-view id=\"webView\"\u003e\u003c/web-view\u003e\n....\n\u003c/Page\u003e\n```\n\nInitialize `WebViewInterface` Plugin in your javascript file.\n```javascript\nvar webViewInterfaceModule = require('nativescript-webview-interface');\nvar oWebViewInterface;\n\nfunction pageLoaded(args){\n    page = args.object;\n    setupWebViewInterface(page) \n}\n\n// Initializes plugin with a webView\nfunction setupWebViewInterface(page){\n    var webView = page.getViewById('webView');\n    oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');\n}\n```\n**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\nof communication from web-view to android not working sometimes on some devices.\n\nUse any [API Method](#native-app-api) of WebViewInterface Class\n```javascript\nfunction handleEventFromWebView(){\n    oWebViewInterface.on('anyEvent', function(eventData){\n        // perform action on event\n    });\n}\n\nfunction emitEventToWebView(){\n    oWebViewInterface.emit('anyEvent', eventData);\n}\n\nfunction callJSFunction(){\n    oWebViewInterface.callJSFunction('functionName', args, function(result){\n        \n    });\n}\n```\n\nIf 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\n```javascript\nwebView.on('loadFinished', (args) =\u003e {\n    if (!args.error) {\n        // emit event to webView or call JS function of webView\n    }\n});\n```\n\n### Inside WebView\n\nImport `nativescript-webview-interface.js` in your html page.\n```html\n\u003chtml\u003e\n    \u003chead\u003e\u003c/head\u003e\n    \u003cbody\u003e\n        \u003cscript src=\"path/to/nativescript-webview-interface.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"path/to/your-custom-script.js\"\u003e\u003c/script\u003e        \n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nUse any [API Method](#webview-api) of `window.nsWebViewInterface` inside webview\n\n```javascript\nvar oWebViewInterface = window.nsWebViewInterface;\n\n// register listener for any event from native app\noWebViewInterface.on('anyEvent', function(eventData){\n    \n});\n\n// emit event to native app\noWebViewInterface.emit('anyEvent', eventData);\n\n// function which can be called by native app\nwindow.functionCalledByNative = function(arg1, arg2){\n    // do any processing\n    return dataOrPromise;\n}\n```\n## API\n\n### Native App API\n\n*Constructor:*\n\n#### WebViewInterface(webView: WebView, src?: string)\n**webView** is an instance of nativescript [web-view](https://docs.nativescript.org/cookbook/ui/web-view). \n\n**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.\n\n*API Methods of WebViewInterface Class:*\n\n#### on(eventOrCmdName: string, callback: (eventData: any) =\u003e void): void\nUse this method to assign listener to any event/command emitted from webView.\n\nCallback will be executed with the data sent from webView in any format. \n\n#### off(eventOrCmdName: string, callback?: (eventData: any) =\u003e void): void\nUse this method to de-register listener of any event/command emitted from webView.\n\nIf callback is not set, all the event listeners for this event will be de-registered.\n\n#### emit(eventOrCmdName: string, data: any): void\nUse this method to emit any event/command from native app to webView with data in any format.\n\n#### callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) =\u003e void, errorHandler: (error: any) =\u003e void): void\nUse this method to call to any javascript function in global scope in webView.\n\nArguments are optional. But if supplied, must be in array format.\n\nIf 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.\u003cbr/\u003e\nIf the function execution generates any error, the errorHandler will be called with the error.\n\n#### destroy(): void\nUse this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.\n\n### WebView API\n\nAPI Methods available in `window.nsWebViewInterface` global variable.\n\n#### on(eventOrCmdName: string, callback: (eventData: any) =\u003e void): void\nUse this method to assign listener to  any event/command emited from native app.\n\nCallback will be executed with the data sent from native app in any format.\n\n#### emit(eventOrCmdName: string, data: any): void \nUse this method to emit any event/command from webView to native app with data in any format.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshripalsoni04%2Fnativescript-webview-interface","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshripalsoni04%2Fnativescript-webview-interface","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshripalsoni04%2Fnativescript-webview-interface/lists"}