WKWebview - Complex communication between Javascript & native code

Clement Prem picture Clement Prem · Mar 25, 2015 · Viewed 33.5k times · Source

In WKWebView we can call ObjectiveC/swift code using webkit message handlers eg: webkit.messageHandlers.<handler>.pushMessage(message)

It works well for simple javascript functions without parameters. But;

  1. Is it possible to call native code with JS callback function as parameters?
  2. Is it possible to return a value to JS function from native code?

Answer

Clement Prem picture Clement Prem · May 19, 2015

Unfortunately I couldn't find a native solution.

But the following workaround solved my problem

Use javascript promises & you can call the resolve function from your iOS code.

UPDATE

This is how you can use promise

In JS

   this.id = 1;
    this.handlers = {};

    window.onMessageReceive = (handle, error, data) => {
      if (error){
        this.handlers[handle].resolve(data);
      }else{
        this.handlers[handle].reject(data);
      }
      delete this.handlers[handle];
    };
  }

  sendMessage(data) {
    return new Promise((resolve, reject) => {
      const handle = 'm'+ this.id++;
      this.handlers[handle] = { resolve, reject};
      window.webkit.messageHandlers.<yourHandler>.postMessage({data: data, id: handle});
    });
  }

in iOS

Call the window.onMessageReceive function with appropriate handler id