Cordova ios build results in black screen

[krunkster]

I’ve gone through all the steps listed in these places:
http://wiki.compilgames.net/doku.php/gdevelop5/publishing/android_and_ios_with_cordova
https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html

I have a fairly good understanding of how it is supposed to work.
I’ve even managed to get a Cordova HelloWorld app to work as expected:

Creating your first Cordova app - Apache Cordova

However, anytime I use the export function from gdevelop to cordova and build that exported bundle I end up with a black screen when the ios app runs. Both in simulator and on device.

I’ve tested this even with a blank project with just one text box added that says “Hello World”.
It seems anything exported from gdevelop just won’t run on iOS using cordova build.

I’m tempted to open this as a bug, but I’m new to this, and wanted to check here first to see if anyone else is able to build to iOS from gdevelop using cordova. (latest versions of both).

[Gruk]

See this thread, the solution might apply:

[Workaround Found] ITMS-90809: Deprecated API Usage

Finnaly I found a solution: 1 - sudo npm uninstall -g cordova 2 - sudo npm install -g cordova@9.0.0 3 - In config.xml 3.1 - At the end of file add this <preference name=“WKWebViewOnly” value=“true” /> <feature name=“CDVWKWebViewEngine”> <param name=“ios-package” value=“CDVWKWebViewEngine” /> </feature> <preference name=“CordovaWebViewEngine” value=“CDVWKWebViewEngine” /> <preference name=“AllowBackForwardNavigationGestures” value=“true” /> <preference name=“Allow3DTouchLinkPreview” va…

[krunkster]

Thank you. That solution did not work for me, but it did lead me down the right path.

So the root of the problem is that GDevelop seems to use “file://” URLs to load the local javascript data from the cordova project… Although I don’t know where. This results in console error on iOS for each javascript file in the project that look like:

Error Domain=NSURLErrorDomain Code=-999 “cancelled”
So since all of the javascript files fail to load the process just hangs with a blank screen.

The fix is to use a plugin like the one mentioned above to allow XHR file URL requests in WebKit. Here’s the plugin that I found that works:

GitHub - globules-io/cordova-plugin-ios-xhr: Cordova iOS 6+ File XHR Plugin

You’ll also need to add the associated preference to your config.xml:
<preference name="allowFileAccessFromFileURLs" value="true" />

These two extra steps fix my issues and went from black screen to working iOS app!

Summary of steps:

1. Export from GDevelop using cordova option
2. cordova platform add ios
3. cordova plugin add @globules-io/cordova-plugin-ios-xhr
4. Modify the config.xml and add <preference name="allowFileAccessFromFileURLs" value="true" /> near any other preference in there.
5. cordova build
6. cordova emulate

In my experience the cordova servers are really flaky and often get connection errors, so I always run each command multiple times until it gets past those connection issues.

[krunkster]

I finally got back to iOS development, and had to revisit this thread to get it working again:sweat_smile:
I also discovered another couple of tweaks that I think most everyone making an iOS game will want to add:

• Auto hide the “home bar” at the bottom of the screen:

cordova plugin add cordova-plugin-hide-home-indicator

To me that was pretty critical from a UX perspective in a game. It still shows up if you touch near the middle bottom of the screen, but it does fade away now instead of always being there. If you have an older iOS device with a physical home button you might not be familiar with this, but your users will!

• Hide the status bar (time/battery/cellular/wifi)
  You can add this to your config.xml:

<edit-config file="*-Info.plist" target="UIStatusBarHidden" mode="merge">
    <true/>
</edit-config>
<edit-config file="*-Info.plist" target="UIViewControllerBasedStatusBarAppearance" mode="merge">
    <false/>
</edit-config>

In summary here here are all the modifications I found necessary to add to the generated config.xml when you export to "Android & iOS (Manual Build) in GDevelop:

    <plugin name="cordova-plugin-screen-orientation" version="3.0.2" />
    <plugin name="cordova-plugin-hide-home-indicator" spec="1.0.*" />
    <preference name="orientation" value="landscape" />
    <preference name="allowFileAccessFromFileURLs" value="true" />
    <preference name="AllowInlineMediaPlayback" value="true" />
    <preference name="AllowsAirPlayForMediaPlayback" value="false"/>
    <edit-config file="*-Info.plist" target="UIStatusBarHidden" mode="merge">
        <true/>
    </edit-config>
    <edit-config file="*-Info.plist" target="UIViewControllerBasedStatusBarAppearance" mode="merge">
        <false/>
    </edit-config>

[Zuber]

I’ve enabled the “hide status bar” option in xcode but it didn’t hide it so i’ll use your method when I push the next update! Thanks for the tip! The conversion to IOS remains as tricky as ever.