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

5 posts, 0 answers
  1. Brandon Peterson
    Brandon Peterson avatar
    50 posts
    Member since:
    May 2007

    Posted 28 Jun Link to this post

    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>
    </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>
    <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>
     
     
  2. Kaloyan
    Admin
    Kaloyan avatar
    877 posts

    Posted 04 Jul Link to this post

    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.

     
  3. Brandon Peterson
    Brandon Peterson avatar
    50 posts
    Member since:
    May 2007

    Posted 14 Jul Link to this post

    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.

  4. RizePoint
    RizePoint avatar
    1 posts
    Member since:
    Oct 2014

    Posted 13 Sep Link to this post

    Was the planned fix ever implemented? It's been months since this post and I'm running into the same problem. 
  5. Garo
    Admin
    Garo avatar
    136 posts

    Posted 15 Sep Link to this post

    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
     

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

     
Back to Top