Ios JavaScript bridge

javascript

javascript-bridge

web-development

performance

byNikita Barsukov·Aug 24, 2024

The secret to working with a JavaScript bridge in iOS involves WKWebView. By integrating it, you ensure interoperability between JavaScript and Swift/Objective-C environments. WKScriptMessageHandler is the cornerstone for enabling message exchange.

Swift Setup:

import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Think of WKWebViewConfiguration as the bridge's blue print - essential for construction.
        let config = WKWebViewConfiguration()
        config.userContentController.add(self, name: "callbackHandler")
        
        webView = WKWebView(frame: .zero, configuration: config)
        webView.load(URLRequest(url: URL(string: "path_to_your_local_or_remote_html")!))
        view = webView  // This isn't lazy setting of view, it's just intelligent use of view controllers!
    }

    // That's our postman delivering messages from JS
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "callbackHandler" {
            // Got some JS love, handling it here
        }
    }
}

JavaScript Call:

function triggerNative() {
    // Spiderman sending messages from New York (WebLand 🌐) to Stark Tower (NativeLand 📱)
    window.webkit.messageHandlers.callbackHandler.postMessage('Message for Native');
}

This technique ensures efficient two-way communication with just add() (for handshake in Swift) and postMessage() (for message dispatch in JavaScript).

Impenetrable scripting and execution

Employing specialist bridge builders

For projects with intense JavaScript usage, considering integrating libraries such as WebViewJavascriptBridge or GAJavaScript. They provide sturdy and resilient mechanisms for two-way communication.

Asynchronous calls: The saviours!

To handle asynchronous calls, especially with the UIWebView, adopt the iframe technique.

Coded to match your iOS version

Before setting your sails, check the iOS version compatibility. WKWebView is your lighthouse but remember it's available only from iOS 8 and onwards.

Eavesdropping on JavaScript events

Create custom URL schemes in Objective-C or Swift to intercept calls, turning JavaScript whispers into native shouts!

Fluent conversations with JavaScriptCore

When targeting iOS 7 or above, leverage the JavaScriptCore framework for accessing JavaScript functions and values akin to ordering coffee at your local café.

Security: Your guardian angel

Avoid getting kicked from the App Store party. Avoid the use of private APIs and strictly follow the guidelines set by the bouncer, WebScripting_Protocol.

Considerations while adopting JavaScript Bridge

Cruising with custom objects

Give JavaScript a “talk-to-me” directory via custom objects. Use the webView.setValue:forKey: and make your WebView compliant with Key-Value Observing.

Multi-lingual project? No issues!

Establish a clean interface for your Swift and Objective-C code to interact with the JavaScript context. It's like having a professional bilingual translator.

Handling memory overhead

Mind your step when passing messages and objects between JavaScript and native environments. Keep a check on memory usage by cleaning message handlers.

Hybrid app approach

Develop a hybrid approach by combining HTML5 capabilities with native iOS frameworks. It's like having your cake (HTML5) and eating it too (Native iOS)!