Updating WKWebView for Hybrid iOS App
With the introduction of iOS 8.0 version, Apple has stopped supporting the usage of UIWebView classes, thereby deprecating the functionalities that had previously supported the embedded web contents in iOS applications. The transition to WKWebView is essential and mandatory to serve the purposes of rendering the embedded and interactive web content in iOS applications. It is recommended for you to use the Cordova iOS 5.1.1 version or above, so as to facilitate the process of feasible migration and moreover, the previous versions of Cordova iOS platform do not support WKWebView class. The following steps enable you to migrate from UIWebView to WKWebView for the hybrid iOS apps built using Canvas Technology:
- Add the cordova-plugin-wkwebview-engine plugin to your project in Cordova iOS platform. For detailed information on Cordova iOS platform, refer Cordova iOS platform guide.
- Add the cordova-plugin-wkwebviewhrfix plugin to the same project.
- Ensure that you use the latest canvas.hybrid.util.js file version.
- Ensure that you use the latest Hybrid.xml file version.
- Ensure that you use the latest CanvasIntellectPlugin.m file version.
- In the project search path, replace the existing CDVWKWebViewEngine.m with the latest CDVWKWebViewEngine.m.
In the Cordova iOS platform, in the config.xml file, specify the preference name and value, as shown in the following code snippet:
<preference name="WKWebViewOnly" value="true" />
Replace each and every xmlhttprequest/jQuery request calls in the pre-login path to facilitate the calling of native library functions through the Canvas plugin. The following code snippet serves as a sample reference:
var reqOptions = { method: "POST", host: canvasHybridUtil.getServerIp(), path: canvasHybridUtil.getServerPath() + "PortalLoginServlet", port: canvasHybridUtil.getServerPort(), headers: { "Content-type": "application/x-www-form-urlencoded" }, body: parameters }; this.reqOptions = reqOptions; canvasHybridUtil.sendSecureHttpRequest(this, loginFailureCallback, loginSuccessCallback); /** * @Method loginSuccessCallback * @description This method is success callback method for login request * @param successResponse * @return null */ function loginSuccessCallback(successResponse) { validateLoginResponse(successResponse.body, uname); } /** * @Method loginFailureCallback * @description This method is failure callback method for login request * @param successResponse * @return null */ function loginFailureCallback(err) { showAlert(err); }