Technical explanation

The basic idea is to create a JavaScript function in the WKWebView that can be called from the native code, and vice versa. This allows the two sides to exchange data and trigger actions.

iOS

To create a JavaScript function that can be called from the native code, you can use the WKScriptMessageHandler protocol. This protocol allows you to receive messages sent from the WKWebView and handle them in the native code.

To use this protocol, you need to set up a message handler in the native code and register it with the WKWebView. Here's an example of how you can do this:

Create a class that implements the WKScriptMessageHandler protocol, and define the userContentController(_:didReceive:) method to handle the incoming message.
Create an instance of the class and add it to a WKUserContentController object.
Set the userContentController property of a WKWebViewConfiguration object to the WKUserContentController object you just created.
Create a WKWebView object with the WKWebViewConfiguration object.

class MessageHandler: NSObject, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "myMessageHandler" {
            // Handle the message here
        }
    }
}

let messageHandler = MessageHandler()

let userContentController = WKUserContentController()
userContentController.add(messageHandler, name: "myMessageHandler")

let configuration = WKWebViewConfiguration()
configuration.userContentController = userContentController

let webView = WKWebView(frame: .zero, configuration: configuration)

Android

We can create interfaces between JavaScript and client-side Android code to send JS data to the Android app. JavaScript code can call a method in the interfaces to send a content type of String to the Android app. Here are the steps that you can follow:

Create a new Kotlin class in your project that works as the JS and Android app interface. Add @JavascriptInterface to methods to be called from JS.
class WebAppJSInterface { /** VseeApp use ObjectMapper for JSON serialization|deserialization */ private val objectMapper = ObjectMapper().apply { registerModule(KotlinModule()) configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false) enable(DeserializationFeature.ACCEPT_EMPTY_ARRAY_AS_NULL_OBJECT) enable(DeserializationFeature.ACCEPT_EMPTY_STRING_AS_NULL_OBJECT) } /** Handle various types of events from Webpage */ @JavascriptInterface fun postMessage(content: String) { try { val event: JsEvent = objectMapper.readValue(content, JsEvent::class.java) Timber.d("Received JS event: ${event.name}") Timber.d("Content: ${event.data}") } catch (e: JsonParseException) { Timber.e(e, "Error parsing message from JS") } catch (e: JsonMappingException) { Timber.e(e, "Error mapping JsEvent data structure") } } }
Call addJavascriptInterface(), passing it a class instance at Step 1 to bind to JavaScript and an interface name that JavaScript can call to access the class.

webview.addJavascriptInterface(WebAppJSInterface(), "VseeAndroid")
webview.loadUrl(args.url)

This creates an interface called VseeAndroid for JavaScript running in the WebView. At this point, the web application has access to the WebAppJSInterface class.

Javascript

To call this message handler from the WKWebView, you can use JavaScript to create a message and send it to the native code. Here's an example of how you can do this:

Create a message with the data you want to send to the native code.
Use the webkit.messageHandlers object and the name of the message handler you registered earlier to send the message to the native code.

File:

/js/mobile_app_bridge.js

Real Events from browser to mobile

visitDetailObject

Event name	body	Subcribe to

Event name

body

Subcribe to

host_joined

patient.inbrowserCalling.ParticipantJoined

visit.ended

Notifications service:

When provider checkout patient, server will send a notification to the patient side to hangup.

visits.hangup.patient

VSee Developers

Communication with BrowserCall UI

Technical explanation

iOS

Android

Javascript

Real Events from browser to mobile

visitDetailObject

References