Setting up JS bridge between your webpage and WKWebview in your iOS app

Photo by Ion (Ivan) Sipilov on Unsplash

Nowadays a lot of apps prefer to display content using a webview. This creates a need for webviews to try and act like native views. For that, there has to be a way for the web page to communicate with the app and vice versa. This can be done using a JavaScript bridge.

What is a JS bridge?

A JavaScript bridge acts like a communication channel for two-way data exchange between the web content and the native app. Both iOS and Android webviews support communicating through JS bridges. In this tutorial we will focus on iOS setup.

Setting up the JS bridge on iOS

To display your web content in the app, you will need an instance of WKWebView setup and shown to the user in one of your screens. For the webview:

• Define a WKScriptMessageHandler that will receive messages from JavaScript and process the data.

• Add the script message handler to the user content controller that’s in webview’s configuration. The name of the message handler is important, so that you can make sure you are only processing data that…