Web - Android Bridge

There are many use cases in native mobile development to add a web view in native apps either it can be a single webpage like login, payments or complete web application.

Irrespective of the scenario, interaction between web and native layer is essential to transfer data and access hardware.

Both platforms provide a way for this type of communication. This article shows how to write a bridge on top of the native solution. This bridge is inspired from React Native Architecture.

The Bridge is the layer that permits the JavaScript and the Native modules to interact with each other. It carries serialized messages from JavaScript to Native. In native side it deserializes the message function and execute function.

When execution is completed in native, its data is assembled and this data is sent to the Bridge as a serialized message. After that, the Bridge proceeds this message towards the JavaScript layer.

Javascript to Android

In JS side,

Create a serializer to form a JSON string

name - Unique name of operationdata - Data required for the operation

type - Operation type synchronous or Asynchronous (default: async)

Serializer.js

serialize(input) {
    return JSON.stringify({
      name: input.name || '',
      data: input.data || {},
      type: input.type || 'async',
    });
}

Bridge.js

postmessage(data) {
    const serializedData = Serializer.serialize(data);
    window.ANDROID && window.ANDROID.postMessage(serializedData);
}

In Native sideCreate JSBridge Class

class JSBridge(){
    @JavascriptInterface
    fun postMessage(message:String){
        //Received message from webview in native, process data
    }
}

Attach to webview

Android to Javascript

In JS side,

Adding function onReceiveMessage to window object when application loads

    window.onReceiveMessage = nativeData => {
       //Received message from native in web, process data
    };

In Native sideExecute evaluateJavascript in native

mWebView.evaluateJavascript("window.onReceiveMessage({data: “somedata”})");

This is how a Web-Android Bridge is written on top of a native solution. Have you tried something similar? Let us know!