Webview <-> app.js Communication

In order to communicate between app.js and any WebView that gets instantiated, we allow users to create custom events or custom JS RPC methods.

Custom Events

You can send events from app.js to javascript in WebViewPlugin instances, and vice-versa. These events are produced and consumed with a simple on() and trigger() API, with some slight variation between the web views themselves and app.js.

eventEmitter.trigger(eventName, params)

eventEmitter.on(eventName, callback)

In the web views, you will have to have astro-client.js loaded, and the Astro object itself will emit events sent from the app, and send events we admit to app.js. In the app, web view plugin instances will emit events from their corresponding web views, and can be used to trigger events in them.


In the WebViews:

Send an event to app.js:

Astro.trigger('loadedImage', {
    url: ''

Register a handler for events from app.js:

Astro.on('loggedIn', (data) => {
    var userName = data.userName

In app.js:

Send an event to the web view:

webViewPluginInstance.trigger('loggedIn', {
    userName: "Steve"

Receive an event from the web view:

webViewPluginInstance.on('loadedImage', (data) => {

Custom JS RPC Methods

If you need to invoke something on app.js which needs to return a response, you should setup a custom JS RPC method.


To setup a JS RPC method, you need to first register an RPC method.

Astro.registerRpcMethod(methodName, methodArgs, callback)

Astro.registerRpcMethod('sum', ['a', 'b'], (res, a, b) => {
    res.send(null, a+b)


To call an JS RPC method, you must create a proxy method that matches the RPC method you registered in app.js.

Astro.jsRpcMethod(eventName, parameters)


try {
    const sum = Astro.jsRpcMethod('sum', ['a', 'b'])
    const result = await sum(1, 2)
    console.log(`The sum of 1 and 2 is: ${result}`);
} catch (error) {
    console.log(`An error occurred: ${error}`)

Native Information injected into WebViews

Astro injects an object into it's web views in order for the web views to have some knowledge about the native app in which they are running. The injected object is called AstroNative and is available in the global namespace of the web view. Note that in Android, AstroNative won't be available until astro-client.js or astro-full.js loads.

AstroNative contains the following information:

In Android, AstroNativeObject.isPreviewEnabled() is available to check the preview status.