Enhancing UIWebView with KakiWebView: Plugins, JSBridge, and JavaScriptCore Integration

Author: Yong Weng (iOS architect at Hujiang). After a long pause since the previous "Thinking" article, the author revisits WebView development, focusing on UIWebView—still relevant for iOS 7 support—while noting that WKWebView is preferred from iOS 8 onward. The discussion also applies to WKWebView.

Motivation for Using WebView

WebView serves as the glue between native mobile apps and touch‑screen HTML5 pages, offering cross‑platform development, hot‑updates without app releases, low integration cost for multi‑team projects, and a low barrier for platform extensions.

JS & Native Interaction

Two main approaches enable JavaScript and native code to call each other inside a UIWebView: JSBridge and JSCore .

JSBridge

JSBridge relies on two UIWebView delegate methods: stringByEvaluatingJavaScriptFromString: (native invoking JavaScript) and webView:shouldStartLoadWithRequest:navigationType: (JavaScript invoking native). The latter intercepts an iframe load request, extracts information from the URL, and redirects to a native method. Open‑source implementations such as WebViewJavascriptBridge are available.

JSCore

JSCore (JavaScriptCore) is part of WebKit and provides a direct bridge via the JSContext class. By creating a JSContext, developers can inject Objective‑C objects into the JavaScript environment and call JavaScript functions from native code, and vice versa. Refer to the JavaScriptCore API documentation for details.

Organizing Code

When many features are added to a UIWebView controller, the class can become large and hard to maintain. Two architectural directions help:

Extract intermediate layers, such as common base classes or mediators, to isolate dependencies.

Decompose and recombine: split a big controller into modular components and then compose them.

The author prefers the decompose‑and‑recombine approach, avoiding deep inheritance hierarchies.

A Lightweight, Non‑Intrusive Solution

KakiWebView is a simple, readable wrapper built on the decompose‑and‑recombine principle. Its goals are:

Non‑intrusive usage of existing UIWebView instances.

Strong extensibility through custom plugins.

Low learning curve and easy integration.

Project repository: https://github.com/prinsun/KakiWebView

Built‑in Plugins

KakiJavascriptCorePlugin – injects an Objective‑C object into the JavaScript environment using JSCore.

KakiProgressPlugin – based on NJKWebViewProgress, adds a progress bar to UIWebView page loading.

KakiPopGesturePlugin – implements edge‑swipe back navigation similar to Safari.

KakiTitleObserverPlugin – observes changes to the web page title and provides callbacks.

// Enable Kaki
[self.webView setEnableKakiPlugins:YES];

// Install Kaki plugins
[self.webView installKakiPlugin:[KakiProgressPlugin.alloc init]];
[self.webView installKakiPlugin:[KakiPopGesturePlugin.alloc init]];
[self.webView installKakiPlugin:[KakiTitleObserverPlugin.alloc init]];

// Configure plugins
__weak __typeof(self) wself = self;
[self.webView.titleObserverPlugin setOnTitleChanged:^(NSString *title) {
    wself.titleLabel.text = title;
}];
self.webView.progressPlugin.progressColor = [UIColor redColor];

The provided plugins serve as practical examples for creating custom extensions. By building on KakiWebView, developers can craft their own plugins, combine them with NSURLProtocol for offline browsing, or replace JSCore with a JSBridge‑based plugin, tailoring the container to specific business needs.

In summary, KakiWebView offers a solid foundation for extending UIWebView functionality while keeping the codebase modular and maintainable.