White blank screen with Cordova iOS cordova-plugin-wkwebview-engine plugin

2
votes

We have a React app using cordova and we've been getting the following error :

***ITMS-90809: Deprecated API Usage - New apps that use UIWebView are no longer accepted. Instead, use WKWebView for improved security and reliability.***

I added cordova-plugin-wkwebview-engine plugin and followed the cordova documentation.

Also, I added these in my config.xml:

<feature name="CDVWKWebViewEngine">
     <param name="ios-package" value="CDVWKWebViewEngine" /> 
</feature> 
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

The cordova-plugin-ionic-webview plugin is not installed in the project. When this plugin is added, the app is stuck on a white blank screen.

I tried adding <preference name="WKWebViewOnly" value="true" /> in config.xml file but the issue still exists.

If I remove the plugin the app just works fine but then TestFlight rejects it.

Any help would be greatly appreciated !

2
cordovauiwebviewcordova-pluginswkwebviewtestflight

2 Answers

3
votes

After banging my head against wall for almost 3 days I fixed my issue. Posting my steps/solution here in case someone needs it.

I updated cordova-ios to the latest stable version (5.1.1) and I'm only using cordova-plugin-ionic-webview, NOT cordova-plugin-wkwebview-engine

Adding es6-promise-plugin to the project fixed the white screen issue (didn't make sense to me but it works).

Here is the list of all the cordova plugins:

  • cordova-plugin-device 2.0.3 "Device"
  • cordova-plugin-file 6.0.2 "File"
  • cordova-plugin-file-opener2 3.0.0 "File Opener2"
  • cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
  • cordova-plugin-screen-orientation 3.0.2 "Screen Orientation"
  • cordova-plugin-splashscreen 5.0.3 "Splashscreen"
  • cordova-plugin-statusbar 2.4.3 "StatusBar"
  • cordova-plugin-whitelist 1.3.4 "Whitelist"
  • es6-promise-plugin 4.2.2 "Promise"

And here is my config.xml:

<platform name="ios">
   <preference name="WKWebViewOnly" value="true" />
   <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
   <feature name="CDVWKWebViewEngine">
       <param name="ios-package" value="CDVWKWebViewEngine" />
   </feature>
   <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
   ...
   ...
   ...
</platform>
0
votes

Thank you so much for posting your solution. I had a similar problem and was struggling to find the answer. In my case, the splash screen remained and the app wouldn't run after upgrading to WKWebView.

I only updated a subset of your list of plugins (only the ones needed) to the version you recommended and some differences in the config.xml but it works now. You are a lifesaver.

Plugins updated

  • cordova-plugin-device 2.0.3 "Device"
  • cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
  • cordova-plugin-splashscreen 5.0.3 "Splashscreen"
  • cordova-plugin-statusbar 2.4.3 "StatusBar"
  • cordova-plugin-whitelist 1.3.4 "Whitelist"

Not required

  • cordova-plugin-file 6.0.2 "File"
  • cordova-plugin-file-opener2 3.0.0 "File Opener2"
  • cordova-plugin-screen-orientation 3.0.2 "Screen Orientation"
  • es6-promise-plugin 4.2.2 "Promise"

config.xml

<feature name="CDVWKWebViewEngine"><br>
  <param name="ios-package" value="CDVWKWebViewEngine" /><br>
</feature><br>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" /><br>
<br> 
<allow-navigation href="http://localhost:8080/*" />`<br>