Having trouble with UIWebView / WKWebview

So my app receives the UIWebView deprecation warning message when submitted to ITunes connect.

I’ve added the following as specified in the documentation:

   <preference name="WKWebViewOnly" value="true" />

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

    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>
<plugin name="cordova-plugin-wkwebview-engine"/>
<plugin name="cordova-plugin-inappbrowser"/>

However, when I build and try to test it goes from the splash screen to a blank white screen and no further. Is this from something still calling the UIWebView or a problem with something else? Thanks.

Here is my config -

  <preference name="phonegap-version" value="cli-9.0.0" />
  <preference name="cordova-ios" version="6.0.0" />
  <preference name="android-build-tool" value="gradle" />
  <preference name="permissions" value="none" />
  <preference name="prerendered-icon" value="true" />
  <preference name="android-windowSoftInputMode" value="adjustResize" />
  <preference name="SplashScreenDelay" value="10000" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
  <preference name="FadeSplashScreen" value="false" />
  <preference name="ShowSplashScreenSpinner" value="false" />
  <preference name="DisallowOverscroll" value="true" />
  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarStyle" value="lightcontent" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="android-minSdkVersion" value="19" />
  <preference name="android-targetSdkVersion" value="28" />
  <platform name="ios">
    <preference name="WKWebViewOnly" value="true" />
    <feature name="CDVWKWebViewEngine">
      <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    
    <feature name="StatusBar">
      <param name="ios-package" value="CDVStatusBar" onload="true" />
    </feature>
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarStyle" value="lightcontent" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="StatusBarDefaultScrollToTop" value="false" />

    
    <icon height="1024" width="1024" src="res/PackageIcons.iOS.iTunesArtwork.png" />
    <!-- 2732x2732 -->
    <splash src="res/Default@2x~universal~anyany.png" />
    <icon src="res/icon/ios/icon-1024.png" width="1024" height="1024"/>
    <icon src="res/icon/ios/icon-small.png" width="29" height="29"/>
    <icon src="res/icon/ios/icon-small@2x.png" width="58" height="58"/>
    <icon src="res/icon/ios/icon-small@3x.png" width="87" height="87"/>
    <icon src="res/icon/ios/icon-small-40.png" width="40" height="40"/>
    <icon src="res/icon/ios/icon-small-40@2x.png" width="80" height="80"/>
    <icon src="res/icon/ios/icon-small-40@3x.png" width="120" height="120"/>
    <icon src="res/icon/ios/icon-small-50.png" width="50" height="50"/>
    <icon src="res/icon/ios/icon-small-50@2x.png" width="100" height="100"/>
    <icon src="res/icon/ios/icon.png" width="57" height="57"/>
    <icon src="res/icon/ios/icon@2x.png" width="114" height="114"/>
    <icon src="res/icon/ios/icon-60.png" width="60" height="60"/>
    <icon src="res/icon/ios/icon-60@2x.png" width="120" height="120"/>
    <icon src="res/icon/ios/icon-60@3x.png" width="180" height="180"/>
    <icon src="res/icon/ios/icon-72.png" width="72" height="72"/>
    <icon src="res/icon/ios/icon-72@2x.png" width="144" height="144"/>
    <icon src="res/icon/ios/icon-76.png" width="76" height="76"/>
    <icon src="res/icon/ios/icon-76@2x.png" width="152" height="152"/>
    <icon src="res/icon/ios/icon-167.png" width="167" height="167"/>
    <icon src="res/icon/ios/icon-83.5@2x.png" width="167" height="167"/>
    <!--  Storyboard portrait  -->
    <!--<splash src="res/screen/ios/Default@2x~iphone~anyany.png"/>
    <splash src="res/screen/ios/Default@2x~iphone~comany.png"/>
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png"/>
    <splash src="res/screen/ios/Default@3x~iphone~comany.png"/>
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png"/>
    <splash src="res/screen/ios/Default@2x~ipad~comany.png"/>-->
  </platform>
  <platform name="android"></platform>
  <plugin name="cordova-plugin-wkwebview-engine"/>
  <plugin name="cordova-plugin-inappbrowser"/>
  
  <plugin name="cordova-plugin-whitelist" />
  <plugin name="cordova-plugin-ios-longpress-fix" />
  <plugin name="cordova-plugin-statusbar" source="npm" onload="true" />
  <plugin name="cordova-plugin-splashscreen" spec="~5.0.2" onload="true" />
  <plugin name="cordova-plugin-inappbrowser" />
  <plugin name="cordova-plugin-webviewcolor" />
  
  <access origin="*" />
  <access origin="oasisws2.passtimeusa.com" />
  <access origin="passtimeusa.com" />
  <allow-navigation href="*" />
  <allow-intent href="*" />
  <preference name="phonegap-version" value="cli-9.0.0" />
  <preference name="cordova-ios" version="6.0.0" />
  <preference name="android-build-tool" value="gradle" />
  <preference name="permissions" value="none" />
  <preference name="prerendered-icon" value="true" />
  <preference name="android-windowSoftInputMode" value="adjustResize" />
  <preference name="SplashScreenDelay" value="10000" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
  <preference name="FadeSplashScreen" value="false" />
  <preference name="ShowSplashScreenSpinner" value="false" />
  <preference name="DisallowOverscroll" value="true" />
  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarStyle" value="lightcontent" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="android-minSdkVersion" value="19" />
  <preference name="android-targetSdkVersion" value="28" />

Try removing the inappbrowser plugin line:

plugin name=“cordova-plugin-inappbrowser”/

Thanks. Unfortunately, that had no effect.

Do you have a Mac? It would be useful to see if there are any messages on the Console.

I do, but this was developed using DevExtreme in Visual Studio on a Windows machine. I’m not sure how to actually run it on the Mac.

Are you seeing the problem on Android devices, or just iOS?

Just iOS. The Android build worked fine.

Make a dev build and run it on your device (while it’s tethered to your Mac.

Open Safari and look at the Develop menu. If you don’t have one, check this out: https://osxdaily.com/2011/11/03/enable-the-develop-menu-in-safari/

Now start remote debugging: https://appletoolbox.com/use-web-inspector-debug-mobile-safari/

I’m hoping the console window will have messages which give a hint as to what is going on.

Ok. I’ve added the develop menu on the mac and web inspector on the device and tethered the iphone. However, nothing happens when I open the app. Note, it is built as an “Enterprise” app. I believe I need to enter a URL in the mobile safari for it to debug on the mac?

Try making a Development (“dev”) build.

I created a dev cert and provisioning profile and created the app using these settings:
“iosPackageType”: “ad-hoc”,
“platform”: “ios”,
“release”: “debug”
I’m still not seeing it in safari when run on the iphone. I select Iphone in the develop list and it says “no inspectable applications”

Did you go through the suggestions here?

Ok. After rebooting the Mac and restarting the phone I was able to debug from the browser. Unfortunately, the console is empty. I created a super basic test app (one page hello app) and it works fine until I added the WKWebView code referenced in the documentation. At that point it just goes to a blank white screen.

After reloading the app in safari in debug, it will not load any of the html files -

First error is "Cross origin requests are only supported for HTTP.

Then each layout gives an error -"XML HttpRequest cannot load file:///private/var/containers/Bundle/application… .html due to access control checks

So looks like a CORS error when using WKWebView

Good news - I added the following and so far it appears to get around the CORS issue -

  plugin name="cordova-plugin-wkwebview-engine"/
  plugin name="cordova-plugin-wkwebview-file-xhr"/
  plugin name="https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix"/
  plugin name="cordova-plugin-inappbrowser"/

One odd behavior is that it broke - plugin name="cordova-plugin-webviewcolor"

I’m not sure what you’re doing, but could you also handle the CORS issues with something like this?

<plugin name="cordova-plugin-whitelist" source="npm" />
  <access origin="https://*.xxx.com" />
  <access launch-external="yes" origin="tel:*" />
  <allow-intent href="https://*.xxx.com" />
  <allow-intent href="tel:" />
  <allow-navigation href="*" />
  <access origin="*" />

I think you can also specify Content Security Policy in the meta data on your index page:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap://ready file:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src 'self'; img-src 'self'; connect-src https://*.xxx.com tel:;" />

Cordova just published this blog post which looks useful:

https://cordova.apache.org/howto/2020/07/18/uiwebview-warning.html

Thanks. I tried building with this setting in config.xml to use Cordova 6.0.1 -

preference name=“cordova-ios” version=“6.0.1” /

But when I look at the cordova.js file in the web inspector it still shows ‘5.1.1’