This is a migrated thread and some comments may be shown as answers.

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

4 Answers 498 Views

Apache Cordova

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Brandon Peterson asked on 29 Jun 2017, 03:42 AM

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>icon@2x.png</string>

<string>icon.png</string>

<string>Icon-Small.png</string>

<string>Icon-Small@2x.png</string>

<string>icon-72.png</string>

<string>icon-72@2x.png</string>

<string>Icon-Small-50.png</string>

<string>Icon-Small-50@2x.png</string>

<string>icon-40.png</string>

<string>icon-40@2x.png</string>

<string>icon-60.png</string>

<string>icon-60@2x.png</string>

<string>icon-76.png</string>

<string>icon-76@2x.png</string>

<string>icon-83.5@2x.png</string>

</array>

<key>UIPrerenderedIcon</key>

<true/>

</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>

<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>

4 Answers, 1 is accepted

answered on 04 Jul 2017, 12:43 PM

cordova-plugin-wkwebview-engine.zip

LocalWebServer.zip

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

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

answered on 14 Jul 2017, 05:34 PM

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:

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.