Swift Webview How To Call Correctly Swift Code From Javascript

If you're diving into the world of Swift and JavaScript in web development, you might be wondering how to smoothly call Swift code from JavaScript in a WebView. This process can seem complex at first, but with the right approach, you'll be integrating these two powerful technologies seamlessly in no time.

Here's a handy guide to help you understand and implement the steps to properly call Swift code from JavaScript in a WebView:

1. Setting Up Your Xcode Project:
Ensure that you have an Xcode project ready with a WebView component in place. This WebView will be responsible for rendering your web content and handling interactions between JavaScript and Swift code.

2. Adding JavaScript Handlers:
To communicate between JavaScript and Swift, you need to set up JavaScript handlers that will trigger your Swift functions. Define these handlers using the `window.webkit.messageHandlers` object in JavaScript. For example, you can create a handler named `swiftFunction` as follows:

window.webkit.messageHandlers.swiftFunction.postMessage("Hello from JavaScript!");

3. Implementing Native Code:
In your Swift code, you need to handle the messages coming from JavaScript. You can do this by creating a class that conforms to the `WKScriptMessageHandler` protocol. Implement the `userContentController(_:didReceive:)` method to process the messages. Here's a simple example of how you can handle the message:

class MessageHandler: NSObject, WKScriptMessageHandler {
       func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
           if message.name == "swiftFunction" {
               if let messageBody = message.body as? String {
                   print("Message from JavaScript: (messageBody)")
               }
           }
       }
   }

4. Injecting the Message Handler:
After creating your `MessageHandler`, you need to inject it into the `WKUserContentController` of the WebView. This can be done when setting up your WebView instance in Swift. Make sure to add your `MessageHandler` and specify the message handler name you defined in JavaScript:

let userContentController = WKUserContentController()
   userContentController.add(MessageHandler(), name: "swiftFunction")

5. Testing Your Implementation:
Finally, test your setup by running your project and triggering the JavaScript function that calls your Swift code. You should see the message printed in the console indicating that the communication between JavaScript and Swift was successful.

By following these steps, you'll be able to call Swift code correctly from JavaScript in a WebView within your Xcode project. Understanding this process opens up a world of possibilities for creating interactive and dynamic web applications with seamless integration of Swift functionality. Happy coding!