Upgrade Cordova UIWebView to WKWebView for iOS 9

[deadlyfingers]

Cordova WKWebView plugin for iOS 9: https://github.com/apache/cordova-plugin-wkwebview-engine

Should deliver performance equivalent of mobile Safari engine - notably it should mean smoother scrolling of Polymer's iron-list with 20+ items.

We should add this once cordova-ios 4.0.0 and the plugin is released on npm.

[deadlyfingers]

https://cordova.apache.org/announcements/2015/12/08/cordova-ios-4.0.0.html

npm install -g cordova
npm install -g ios-deploy
# Update project to iOS v 4.0.0
cordova platform update ios@4.0.0
cordova plugin add cordova-plugin-wkwebview-engine

[deadlyfingers]

Getting cordova build error Error: Error code 65 for command: xcodebuild with args: http://stackoverflow.com/questions/26571947/upgrade-to-cordova-4-0-0-make-ios-build-fail-with-code-65

• Tried removing then adding iOS platform but to no avail:

cordova platform remove ios
cordova platform add ios@4

• Also tried Xcode 7.2 update...

UPDATE I set up a new Cordova project to figure out what triggered the cordova 'BUILD FAILED' error on cordova-ios v 4.0.0. Turns out its when I add the Cordova Camera plugin in iOS@4.

cordova plugin rm cordova-plugin-camera
cordova build ios

*Also remember to disable it on 'config.xml' otherwise it will be automatically reinstalled:

<!-- <plugin name="cordova-plugin-camera" spec="~1.2.0" /> -->

But after removing & disabling Camera plugin in PostcardApp I still got the same build error:

cordova platform add ios
cordova platform update ios@4.0.0
cordova plugin add cordova-plugin-wkwebview-engine
cordova build ios

Tested config and plugins in new project and it build ok (without Camera plugin). Maybe old plugin to blame?

[deadlyfingers]

Camera plugin ios@4 build issue has been reported on Jira: https://issues.apache.org/jira/browse/CB-10179

[deadlyfingers]

Reverting back to cordova-ios@3.9.2 for now

[mpodwysocki]

@deadlyfingers I figured out the issue. If you did the following:

$ cordova plugin ls
cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-whitelist 1.2.0 "Whitelist"

You need to update the camera plugin to 2.0.0 with the following:

$ cordova plugin add cordova-plugin-camera@2

Then everything should build just fine and your list should look like this:

$ cordova plugin ls
cordova-plugin-camera 2.0.0 "Camera"
cordova-plugin-whitelist 1.2.0 "Whitelist"

[deadlyfingers]

Ok, finally got BUILD SUCCEEDED!

So I was still getting Cordova build failed error on my Mac (Xcode v 7.2)...

** BUILD FAILED **
Error: Error code 65 for command: xcodebuild with args

How I got the build working: Try removing and adding camera@2 plugin again:

cordova plugin remove cordova-plugin-camera
cordova plugin add cordova-plugin-camera@2 --save

Also remove iOS platform and update Android platform to v 5.0 to support the new camera plugin.

cordova platform remove ios
cordova platform add ios@4
cordova platform update android@5.0.0

Then try build for iOS:

cordova build ios

[deadlyfingers]

WKWebKit works but having an issue with cross-document messaging to trigger Cordova Camera function from iframe - parent.postMessage('navigator.camera.getPicture', 'file://'); Error: "Unable to post message to file://. Recipient has origin null."

[Error] Blocked a frame with origin "http://localhost:5000" from accessing a frame with origin "null".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "file". Protocols must match.

    _generatePreview
    RemoteObject
    _wrapObject
    wrapObject
    log ([native code], line 0)
    _cameraButtonHandler (index.js, line 16)
    (anonymous function) ([native code], line 0)

Also noticed this in the Xcode logs:

ERROR Internal navigation rejected - <allow-navigation> not set for url='about:blank'
ERROR Internal navigation rejected - <allow-navigation> not set for url='gap://ready'

[deadlyfingers]

Posting cross-document messages within an iframe with the targetOrigin as 'file://' worked under the UIWebView but WKWebView was giving me a null value here. The only way I found I could get working was to change the targetOrigin to "*" so that the origin check is not made.

[deadlyfingers]

Note: I can trigger the camera to take a picture but sometimes I get stuck on a white screen after choosing 'Use Photo'. I've created a separate issue for this #104.

cordova-plugin-camera@2.0.0 seems to be the latest version atm: https://cordova.apache.org/news/2015/11/24/plugins-release.html npm info cordova-plugin-camera versions

Update: iOS 4.0.1 and cordova-plugin-wkwebview-engine@1.0.1 are out which fixes icon paths and DisallowOverscroll. https://cordova.apache.org/announcements/2015/12/18/cordova-ios-4.0.1.html

cordova platform update ios@4.0.1
cordova plugin add cordova-plugin-wkwebview-engine@1.0.1 --save

[deadlyfingers]

So far I have only found two UX side-effects with the web app since updating to WKWebView -

i. It appears the entire webpage or iframe can be scaled using a pinch gesture. This seems to be fixed by setting user-scalable equals 'no' on the main index.html page.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

ii. Editing textfield causes view to scroll up. I had a CSS hack to stop this happening with UIWebView but this sweet hack no longer works with WKWebView.

The sheer performance gain in WKWebView will provide overall better UX - especially fast scrolling which is buttery smooth even with photos in the iron-list. So it's worth the extra effort!

[mattpodwysocki]

@deadlyfingers the problem here is that the protocols must match where you have file:// and http:// which don't match