WKWebview - Сложная связь между Javascript и нативным кодом

Question

В WKWebView мы можем вызывать код ObjectiveC/swift, используя обработчики сообщений webkit, например: webkit.messageHandlers.<handler>.pushMessage(message)

Это хорошо работает для простых функций JavaScript без параметров. Но;

1. Можно ли вызвать собственный код с функцией обратного вызова JS в качестве параметров?
2. Можно ли вернуть значение функции JS из собственного кода?

Answer 1

К сожалению, я не смог найти нативное решение.

Но следующий обходной путь решил мою проблему

Используйте обещания JavaScript, и вы можете вызвать функцию разрешения из своего кода iOS.

ОБНОВИТЬ

Вот как вы можете использовать обещание

В 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});
    });
  }

в iOS

Позвоните window.onMessageReceive функция с соответствующим идентификатором обработчика

Answer 2

Есть способ получить возвращаемое значение обратно в JS из собственного кода, используя WkWebView. Это небольшой взлом, но без проблем работает для меня, и наше производственное приложение использует много JS/Native-коммуникаций.

В WKUiDelegate, назначенном для WKWebView, переопределите RunJavaScriptTextInputPanel. Это использует способ, которым делегат обрабатывает функцию приглашения JS, чтобы выполнить это:

    public override void RunJavaScriptTextInputPanel (WebKit.WKWebView webView, string prompt, string defaultText, WebKit.WKFrameInfo frame, Action<string> completionHandler)
    {
        // this is used to pass synchronous messages to the ui (instead of the script handler). This is because the script 
        // handler cannot return a value...
        if (prompt.StartsWith ("type=", StringComparison.CurrentCultureIgnoreCase)) {
            string result = ToUiSynch (prompt);
            completionHandler.Invoke ((result == null) ? "" : result);
        } else {
            // actually run an input panel
            base.RunJavaScriptTextInputPanel (webView, prompt, defaultText, frame, completionHandler);
            //MobApp.DisplayAlert ("EXCEPTION", "Input panel not implemented.");

        }
    }

В моем случае я передаю данные типа =xyz,name=xyz,data=xyz для передачи аргументов. Мой код ToUiSynch() обрабатывает запрос и всегда возвращает строку, которая возвращается к JS как простое возвращаемое значение,

В JS я просто вызываю функцию prompt() с моей отформатированной строкой args и получаю возвращаемое значение:

return prompt ("type=" + type + ";name=" + name + ";data=" + (typeof data === "object" ? JSON.stringify ( data ) : data ));

Answer 3

Этот ответ использует идею из ответа Натана Брауна выше.

Насколько я знаю, в настоящее время нет способа вернуть данные обратно в JavaScript синхронным способом. Надеемся, что Apple предоставит решение в будущем выпуске.

Так что взломать перехватить быстрые звонки от js. Apple предоставила эту функцию, чтобы показать собственный дизайн всплывающих окон, когда js вызывает предупреждение, приглашение и т. Д. Теперь, так как приглашение - это функция, в которой вы показываете данные пользователю (мы будем использовать это как параметр метода) и ответ пользователя на это. запрос будет возвращен обратно в js (мы будем использовать это как возвращаемые данные)

Только строка может быть возвращена. Это происходит синхронно.

Мы можем реализовать вышеуказанную идею следующим образом:

В конце JavaScript: вызовите метод swift следующим образом:

    function callNativeApp(){
    console.log("callNativeApp called");
    try {
        //webkit.messageHandlers.callAppMethodOne.postMessage("Hello from JavaScript");


        var type = "SJbridge";
        var name = "functionOne";
        var data = {name:"abc", role : "dev"}
        var payload = {type: type, functionName: name, data: data};

        var res = prompt(JSON.stringify (payload));

        //{"type":"SJbridge","functionName":"functionOne","data":{"name":"abc","role":"dev"}}
        //res is the response from swift method.

    } catch(err) {
        console.log('The native context does not exist yet');
    }
}

В конце swift/xcode сделайте следующее:

1. Реализовать протокол WKUIDelegate а затем назначить реализацию WKWebviews uiDelegate свойство как это:

   self.webView.uiDelegate = self
   

2. Теперь напиши это func webView переопределить (?) / перехватить запрос на prompt из JavaScript

   func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
   
   
   if let dataFromString = prompt.data(using: .utf8, allowLossyConversion: false) {
       let payload = JSON(data: dataFromString)
       let type = payload["type"].string!
   
       if (type == "SJbridge") {
   
           let result  = callSwiftMethod(prompt: payload)
           completionHandler(result)
   
       } else {
           AppConstants.log("jsi_", "unhandled prompt")
           completionHandler(defaultText)
       }
   }else {
       AppConstants.log("jsi_", "unhandled prompt")
       completionHandler(defaultText)
   }}
   

Если вы не позвоните completionHandler() тогда выполнение js не будет продолжено. Теперь проанализируйте json и вызовите соответствующий метод swift.

    func callSwiftMethod(prompt : JSON) -> String{

    let functionName = prompt["functionName"].string!
    let param = prompt["data"]

    var returnValue = "returnvalue"

    AppConstants.log("jsi_", "functionName: \(functionName) param: \(param)")

    switch functionName {
    case "functionOne":
        returnValue = handleFunctionOne(param: param)
    case "functionTwo":
        returnValue = handleFunctionTwo(param: param)
    default:
        returnValue = "returnvalue";
    }
    return returnValue
}

Answer 4

Мне удалось решить эту проблему - добиться двусторонней связи между собственным приложением и WebView (JS) - используя postMessage в JS и evaluateJavaScript в собственном коде.

Решение на высоком уровне было:

• Код WebView (JS):
  • Создайте общую функцию для получения данных из Native (я назвал ее getDataFromNative для Native, который вызывает другую функцию обратного вызова (я назвал ее callbackForNative), который можно переназначить
  • Если вы хотите вызвать Native с некоторыми данными и требовать ответа, сделайте следующее:
    • Переназначить callbackForNative к любой функции, которую вы хотите
    • Вызов Native из WebView с помощью postMessage
• Собственный код:
  • Использовать userContentController для прослушивания входящих сообщений от WebView (JS)
  • Использовать evaluateJavaScript позвонить тебе getDataFromNative JS-функция с любыми параметрами, которые вы хотите

Вот код:

JS:

// Function to get data from Native
window.getDataFromNative = function(data) {
    window.callbackForNative(data)
}

// Empty callback function, which can be reassigned later
window.callbackForNative = function(data) {}

// Somewhere in your code where you want to send data to the native app and have it call a JS callback with some data:
window.callbackForNative = function(data) {
    // Do your stuff here with the data returned from the native app
}
webkit.messageHandlers.YOUR_NATIVE_METHOD_NAME.postMessage({ someProp: 'some value' })

Родной (Swift):

// Call this function from `viewDidLoad()`
private func setupWebView() {
    let contentController = WKUserContentController()
    contentController.add(self, name: "YOUR_NATIVE_METHOD_NAME")
    // You can add more methods here, e.g.
    // contentController.add(self, name: "onComplete")

    let config = WKWebViewConfiguration()
    config.userContentController = contentController
    self.webView = WKWebView(frame: self.view.bounds, configuration: config)
}

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    print("Received message from JS")

    if message.name == "YOUR_NATIVE_METHOD_NAME" {
        print("Message from webView: \(message.body)")
        sendToJavaScript(params: [
            "foo": "bar"
        ])
    }

    // You can add more handlers here, e.g.
    // if message.name == "onComplete" {
    //     print("Message from webView from onComplete: \(message.body)")
    // }
}

func sendToJavaScript(params: JSONDictionary) {
    print("Sending data back to JS")
    let paramsAsString = asString(jsonDictionary: params)
    self.webView.evaluateJavaScript("getDataFromNative(\(paramsAsString))", completionHandler: nil)
}

func asString(jsonDictionary: JSONDictionary) -> String {
    do {
        let data = try JSONSerialization.data(withJSONObject: jsonDictionary, options: .prettyPrinted)
        return String(data: data, encoding: String.Encoding.utf8) ?? ""
    } catch {
        return ""
    }
}

PS Я Front-end разработчик, поэтому я очень хорошо разбираюсь в JS, но у меня очень мало опыта в Swift.

PS2 Убедитесь, что ваш WebView не кэширован, иначе вы можете разочароваться, если WebView не изменится, несмотря на изменения в HTML/CSS/JS.

Ссылки:

Это руководство мне очень помогло: https://medium.com/@JillevdWeerd/creating-links-between-wkwebview-and-native-code-8e998889b503

Answer 5

XWebView - лучший выбор в настоящее время. Он может автоматически выставлять нативные объекты в среду javascript.

Для вопроса 2 вам нужно передать функцию обратного вызова JS нативной, чтобы получить результат, потому что синхронизированная связь от JS к нативной невозможна.

Для получения более подробной информации, проверьте пример приложения.

Answer 6

У меня есть обходной путь для вопроса1.

PostMessage с JavaScript

window.webkit.messageHandlers.<handler>.postMessage(function(data){alert(data);}+"");

Обработайте это в своем проекте Objective-C

-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSString *callBackString = message.body;
    callBackString = [@"(" stringByAppendingString:callBackString];
    callBackString = [callBackString stringByAppendingFormat:@")('%@');", @"Some RetString"];
    [message.webView evaluateJavaScript:callBackString completionHandler:^(id _Nullable obj, NSError * _Nullable error) {
        if (error) {
            NSLog(@"name = %@ error = %@",@"", error.localizedDescription);
        }
    }];
}

Answer 7

Ты не можешь Как упоминалось в @Clement, вы можете использовать обещания и вызывать функцию разрешения. Довольно хорошим (хотя и с использованием Deferred - который сейчас считается анти-паттерном) примером является GoldenGate.

В Javascript вы можете создать объект двумя способами: диспетчеризация и разрешение: (я скомпилировал cs в js для удобства чтения)

this.Goldengate = (function() {
  function Goldengate() {}

  Goldengate._messageCount = 0;

  Goldengate._callbackDeferreds = {};

  Goldengate.dispatch = function(plugin, method, args) {
    var callbackID, d, message;
    callbackID = this._messageCount;
    message = {
      plugin: plugin,
      method: method,
      "arguments": args,
      callbackID: callbackID
    };
    window.webkit.messageHandlers.goldengate.postMessage(message);
    this._messageCount++;
    d = new Deferred;
    this._callbackDeferreds[callbackID] = d;
    return d.promise;
  };

  Goldengate.callBack = function(callbackID, isSuccess, valueOrReason) {
    var d;
    d = this._callbackDeferreds[callbackID];
    if (isSuccess) {
      d.resolve(valueOrReason[0]);
    } else {
      d.reject(valueOrReason[0]);
    }
    return delete this._callbackDeferreds[callbackID];
  };

  return Goldengate;

})();

Тогда вы звоните

  Goldengate.dispatch("ReadLater", "makeSomethingHappen", []);

А со стороны iOS:

    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
        let message = message.body as! NSDictionary
        let plugin = message["plugin"] as! String
        let method = message["method"] as! String
        let args = transformArguments(message["arguments"] as! [AnyObject])
        let callbackID = message["callbackID"] as! Int

        println("Received message #\(callbackID) to dispatch \(plugin).\(method)(\(args))")

        run(plugin, method, args, callbackID: callbackID)
    }

    func transformArguments(args: [AnyObject]) -> [AnyObject!] {
        return args.map { arg in
            if arg is NSNull {
                return nil
            } else {
                return arg
            }
        }
    }

    func run(plugin: String, _ method: String, _ args: [AnyObject!], callbackID: Int) {
        if let result = bridge.run(plugin, method, args) {
            println(result)

            switch result {
            case .None: break
            case .Value(let value):
                callBack(callbackID, success: true, reasonOrValue: value)
            case .Promise(let promise):
                promise.onResolved = { value in
                    self.callBack(callbackID, success: true, reasonOrValue: value)
                    println("Promise has resolved with value: \(value)")
                }
                promise.onRejected = { reason in
                    self.callBack(callbackID, success: false, reasonOrValue: reason)
                    println("Promise was rejected with reason: \(reason)")
                }
            }
        } else {
            println("Error: No such plugin or method")
        }
    }

    private func callBack(callbackID: Int, success: Bool, reasonOrValue: AnyObject!) {
        // we're wrapping reason/value in array, because NSJSONSerialization won't serialize scalar values. to be fixed.
        bridge.vc.webView.evaluateJavaScript("Goldengate.callBack(\(callbackID), \(success), \(Goldengate.toJSON([reasonOrValue])))", completionHandler: nil)
    }

Пожалуйста, рассмотрите эту замечательную статью об обещаниях