Upgrade from Cordova 4 to 6.4 while using WkWebView on iOS - Device Ready does not fire

[Brandon Peterson]

Been banging my head on this for 2 days.

I have upgraded from Cordova 4.0 to 6.4. I have the WkWebView web view option enabled. When enabled, device ready fails to fire and the JS app does not start. The splash screen is shown and the app is running, but no activity from device ready. I have the same outcome on Cordova 5.0 as well. I am on iOS 10.3.1. Switching to UIWebView and it works fine. Good on Android as well. 

I have confirmed my content security policy looks good. Verified my access property in my config.xml. Tried everything I could find on google - still no dice. I noticed that between 4.0 and 5/6.4 that the telerik wkwebview was swapped for the default cordova webview but not sure what else I need to do to trigger it to work.

This is a production app and I need to update the Facebook plugin to the latest - which requires upgrading to 5.0+.

Any suggestions?

Here are some relevant excerpts:

Index.html meta tags:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; img-src * data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://api.stripe.com; media-src *; font-src *">

(I've also tried with just gap: and no gap://ready)

Config.xml (after build):

<?xml version='1.0' encoding='utf-8'?>
<widget version="2.0.0" xmlns="http://www.w3.org/ns/widgets">
    <content src="http://localhost:0" />
    <access launch-external="yes" origin="*" />
    <preference name="AllowInlineMediaPlayback" value="false" />
    <preference name="BackupWebStorage" value="cloud" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="EnableViewportScale" value="false" />
    <preference name="KeyboardDisplayRequiresUserAction" value="false" />
    <preference name="MediaPlaybackRequiresUserAction" value="false" />
    <preference name="SuppressesIncrementalRendering" value="false" />
    <preference name="GapBetweenPages" value="0" />
    <preference name="PageLength" value="0" />
    <preference name="PaginationBreakingMode" value="page" />
    <preference name="PaginationMode" value="unpaginated" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="FadeSplashScreen" value="true" />
    <preference name="FadeSplashScreenDuration" value=".5" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <feature name="LocalStorage">
        <param name="ios-package" value="CDVLocalStorage" />
    </feature>
    <feature name="FacebookConnectPlugin">
        <param name="ios-package" value="FacebookConnectPlugin" />
        <param name="onload" value="true" />
    </feature>
    <plugin name="FacebookConnectPlugin" value="FacebookConnectPlugin" />
    <access origin="https://m.facebook.com" />
    <access origin="https://graph.facebook.com" />
    <access origin="https://api.facebook.com" />
    <access origin="https://*.fbcdn.net" />
    <access origin="https://*.akamaihd.net" />
    <feature name="Notification">
        <param name="ios-package" value="CDVNotification" />
    </feature>
    <feature name="LiveSync">
        <param name="ios-package" value="TLKLiveSyncPlugin" />
    </feature>
    <feature name="BarcodeScanner">
        <param name="ios-package" value="CDVBarcodeScanner" />
    </feature>
    <feature name="Device">
        <param name="ios-package" value="CDVDevice" />
    </feature>
    <feature name="Globalization">
        <param name="ios-package" value="CDVGlobalization" />
    </feature>
    <feature name="PushPlugin">
        <param name="ios-package" value="PushPlugin" />
    </feature>
    <feature name="Battery">
        <param name="ios-package" value="CDVBattery" />
    </feature>
    <feature name="Camera">
        <param name="ios-package" value="CDVCamera" />
    </feature>
    <preference name="CameraUsesGeolocation" value="false" />
    <feature name="Console">
        <param name="ios-package" value="CDVLogger" />
    </feature>
    <feature name="Contacts">
        <param name="ios-package" value="CDVContacts" />
    </feature>
    <feature name="Accelerometer">
        <param name="ios-package" value="CDVAccelerometer" />
    </feature>
    <feature name="Compass">
        <param name="ios-package" value="CDVCompass" />
    </feature>
    <feature name="File">
        <param name="ios-package" value="CDVFile" />
        <param name="onload" value="true" />
    </feature>
    <feature name="FileTransfer">
        <param name="ios-package" value="CDVFileTransfer" />
    </feature>
    <feature name="Geolocation">
        <param name="ios-package" value="CDVLocation" />
    </feature>
    <feature name="Media">
        <param name="ios-package" value="CDVSound" />
    </feature>
    <feature name="Capture">
        <param name="ios-package" value="CDVCapture" />
    </feature>
    <feature name="NetworkStatus">
        <param name="ios-package" value="CDVConnection" />
    </feature>
    <feature name="SplashScreen">
        <param name="ios-package" value="CDVSplashScreen" />
        <param name="onload" value="true" />
    </feature>
    <feature name="StatusBar">
        <param name="ios-package" value="CDVStatusBar" />
        <param name="onload" value="true" />
    </feature>
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarStyle" value="lightcontent" />
    <feature name="Vibration">
        <param name="ios-package" value="CDVVibration" />
    </feature>
    <feature name="CordovaLocalWebServer">
        <param name="ios-package" value="CDVLocalWebServer" />
        <param name="onload" value="true" />
    </feature>
    <preference name="CordovaLocalWebServerStartOnSimulator" value="true" />
    <access origin="http://localhost" />
    <allow-navigation href="http://localhost:*/*" />
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <feature name="YoikScreenOrientation">
        <param name="ios-package" value="YoikScreenOrientation" />
    </feature>
    <feature name="SocialSharing">
        <param name="ios-package" value="SocialSharing" />
        <param name="onload" value="true" />
    </feature>
    <feature name="AppVersion">
        <param name="ios-package" value="AppVersion" />
    </feature>
    <feature name="NetworkActivityIndicator">
        <param name="ios-package" value="NetworkActivityIndicator" />
    </feature>
    <feature name="EmailComposer">
        <param name="ios-package" value="APPEmailComposer" />
    </feature>
    <feature name="InAppBrowser">
        <param name="ios-package" value="CDVInAppBrowser" />
    </feature>
    <feature name="Keyboard">
        <param name="ios-package" onload="true" value="IonicKeyboard" />
    </feature>
</widget>

Info.plist (after build):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>BuildMachineOSBuild</key>
<string>15G31</string>
<key>CFBundleDevelopmentRegion</key>
<string>English</string>
<key>CFBundleDisplayName</key>
<string>ItsOnMe DEV 1.6.0</string>
<key>CFBundleExecutable</key>
<string>Cordova500</string>
<key>CFBundleIconFile</key>
<string>icon.png</string>
<key>CFBundleIcons</key>
<dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>[e-mail]</string>
<string>icon.png</string>
<string>Icon-Small.png</string>
<string>[e-mail]</string>
<string>icon-72.png</string>
<string>[e-mail]</string>
<string>Icon-Small-50.png</string>
<string>[e-mail]</string>
<string>icon-40.png</string>
<string>[e-mail]</string>
<string>icon-60.png</string>
<string>[e-mail]</string>
<string>icon-76.png</string>
<string>[e-mail]</string>
<string>[e-mail]</string>
</array>
<key>UIPrerenderedIcon</key>
<true/>
</dict>
</dict>
<key>CFBundleIdentifier</key>
<string>com.drinkboard.DrinkboardDev</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>IOM.Mobile</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.6.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleSupportedPlatforms</key>
<array>
<string>iPhoneOS</string>
</array>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb1010660852318410</string>
</array>
</dict>
</array>
<key>CFBundleVersion</key>
<string>2017.629.310</string>
<key>DTCompiler</key>
<string>com.apple.compilers.llvm.clang.1_0</string>
<key>DTPlatformBuild</key>
<string>13E230</string>
<key>DTPlatformName</key>
<string>iphoneos</string>
<key>DTPlatformVersion</key>
<string>9.3</string>
<key>DTSDKBuild</key>
<string>13E230</string>
<key>DTSDKName</key>
<string>iphoneos9.3</string>
<key>DTXcode</key>
<string>0731</string>
<key>DTXcodeBuild</key>
<string>7D1014</string>
<key>FacebookAppID</key>
<string>XXXX</string>
<key>FacebookDisplayName</key>
<string>XXXX</string>
<key>Host</key>
<string>https://platform.telerik.com/appbuilder<;/string>
<key>IceniumLiveSyncEnabled</key>
<true/>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
<string>mailto</string>
</array>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>LiveSyncToken</key>
<string>/U8EVyKNlqG47WFHTwqiXVe/DcgebwjS26IgM5pOoxChQI4VAoHWy+pM1P0zvJLAXuN7XoosRaCTuT2hvEZqESHHi1Cyf5iaU0Qvw8UCtQYhLA/Mr+4Rmske5M+lpnAT</string>
<key>MinimumOSVersion</key>
<string>8.4</string>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>akamaihd.net</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
<key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
<false/>
</dict>
<key>facebook.com</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
<key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
<false/>
</dict>
<key>fbcdn.net</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
<key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
<false/>
</dict>
</dict>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>UIDeviceFamily</key>
<array>
<integer>1</integer>
<integer>2</integer>
</array>
<key>UIFileSharingEnabled</key>
<true/>
<key>UIRequiresFullScreen</key>
<true/>
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleDefault</string>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>configuration</key>
<string>debug</string>
</dict>
</plist>

[Kaloyan]

Hello Brandon,

As explained in your support ticket on the same issue, when the WkWebView option is enabled, AppBuilder will automatically include the CDVWKWebViewEngine plugin and this will also include the CordovaLocalWebServer. This step is necessary because CDVWKWebViewEngine can't serve the app resource files himself and CordovaLocalWebServer take care for this.
  
The above said, we are aware that there is an issue when trying to change the port of the web server and the good news is, we plan to fix it soon.

Until that happen as a workaround, we can suggest changing the WkWebView option in your project's properties to Default and then, importing the attached plugins. Those plugins are modified versions of the CDVWKWebViewEngine and CordovaLocalWebServer.

• CDVWKWebViewEngine without a dependency to the CordovaLocalWebServer
• CordovaLocalWebServer whit renamed plugin id.

The last step is to set  <content src="http://localhost:<your_port>" />  with the preferred port in the ios config.xml. 

I hope this helps.

Regards,
Kaloyan
Progress Telerik

 

 

[Brandon Peterson]

For anyone coming after with the same issue - the steps outlined by Kaloyan above are needed but additionally, the following needs to be added to the config.xml:

<feature name="HandleOpenUrl">
        <param name="ios-package" value="CDVHandleOpenURL"/>
        <param name="onload" value="true"/>
</feature>
<feature name="IntentAndNavigationFilter">
        <param name="ios-package" value="CDVIntentAndNavigationFilter"/>
        <param name="onload" value="true"/>
</feature>
<feature name="GestureHandler">
        <param name="ios-package" value="CDVGestureHandler"/>
        <param name="onload" value="true"/>
</feature>

I had a simultaneous ticket open with Telerik support where this was discovered. We've submitted a request for the documentation to be update to reflect this requirement when using the WkWebView.

[RizePoint]

Was the planned fix ever implemented? It's been months since this post and I'm running into the same problem. 

[Garo]

Hello,

One of my colleagues has addressed the issue that you are experiencing in the separate support ticket that you have opened. I would recommend that the discussion is kept there as this will ensure a more easy to follow conversation and minimize the chance of miscommunication.

I hope this is acceptable.

Regards,
Garo
Progress Telerik