WKWebview - Communication complexe entre Javascript & amp; code natif

Il y a un moyen d'obtenir une valeur de retour vers JS du code natif à l'aide de WkWebView. C'est un peu bidouille mais qui fonctionne bien pour moi, sans problèmes, et notre production à l'application utilise beaucoup de JS/Native de la communication.

Dans le WKUiDelegate affecté à la WKWebView, remplacer la RunJavaScriptTextInputPanel. Il utilise de la manière que le délégué poignées de la JS fonction invite à le faire:

    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.");

        }
    }

Dans mon cas, je suis de passage type de données=xyz,nom=xyz,data=xyz pour passer le args. Mon ToUiSynch() code traite la demande et renvoie toujours une chaîne de caractères, qui remonte à la JS comme une simple valeur de retour.

Dans le JS, je suis simplement en appelant le prompt() fonction avec mon formaté args chaîne et d'obtenir une valeur de retour:

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

Cette réponse repose sur l'idée de Nathan Brown réponse ci-dessus.

Autant que je sache, il n'existe actuellement aucun moyen de retourner des données à javascript synchrone. Espérons qu'apple offrira une solution pour l'avenir.

Donc hack est d'intercepter l'invite appels js.
Apple fourni cette fonctionnalité afin de montrer natif popup design lors de la js appelle l'alerte, rapide etc.
Maintenant, depuis l'invite de la fonctionnalité, où vous montrez les données à l'utilisateur (nous allons exploiter cette méthode param ) et la réponse de l'utilisateur pour ce message sera retourné à js (nous allons exploiter ce que le retour de données)

Chaîne de caractères peut être retourné.
Ce qui se passe dans synchrone.

Nous pouvons mettre en œuvre l'idée ci-dessus comme suit:

À la javascript fin:
appel de la swift méthode de la manière suivante:

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

À la swift/xcode fin procédez comme suit:

1. Mettre en œuvre le protocole WKUIDelegate et puis d'affecter la mise en œuvre de WKWebviews uiDelegate propriété comme cela:

   self.webView.uiDelegate = self

2. Maintenant écrire ce func webView à remplacer (?) /intercepter la demande pour prompt à partir de 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)
   }}

Si vous n'appelez pas la completionHandler() puis js exécution ne sera pas traitée. Maintenant parser le json et téléphoner swift méthode.

    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
}

Vous ne pouvez pas.
@Clément mentionné, vous pouvez utiliser des promesses et de l'appel de la détermination de la fonction.
Assez bon état (bien que l'utilisation de Différé qui est considéré comme l'anti-modèle maintenant) exemple est GoldenGate.

En Javascript, vous pouvez créer l'objet avec les deux méthodes: d'expédition et de les résoudre:
(J'ai compilé cs de js pour faciliter la lecture)

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;

})();

Puis vous appelez

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

Et de l'iOS côté:

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

Veuillez considérer ce grand article à propos de promesses