Blank iOS screen

Good morning,

We are trying to convert our project from Phonegap to VoltBuild.

I already compiled successfully for Android release. With the same folder, I also tried the iOS compile process.

I got my .ipa file and I also uploaded it to iTunes. With TestFlight I tested it, but what I have is a simply blank screen. Can you tell me why?

So, the certificates part I think it’s correct since iTunes accepted the upload and I can install it with TestFlight. I hope also the files I put in the zip are correct, since they are the same I used for Android (except edit in voltbuilder.json for the attribute “platform”). Inspecting the ipa file it seems also to be good. Do you know what I can check now? Attached my config.xml and voltbuilder.json files. Can I give you more details?

I also found this and added the line <engine name="ios" spec="6.1.0" /> in my config.xml file, but the result is still a blank screen.

Then I found this and I don’t know if it is related. I don’t use the plugin cordova-plugin-googlemaps but I use a Google Maps object inside a DevExtreme object. I don’t think it’s related, but I honestly don’t know what can I check now.

Regards

Here my config.xml file

  <widget id="xxx" version="x" versionCode="x" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>xxx</name>
  <description>Template</description>
  <author email="info@xxx.com" href="http://www.xxx.com/">xxx</author>
  <preference name="permissions" value="none" />
  <preference name="prerendered-icon" value="true" />
  <preference name="phonegap-version" value="cli-9.0.0" />
  <preference name="android-windowSoftInputMode" value="adjustPan" />
  <preference name="SplashScreenDelay" value="3000" />
  <preference name="AutoHideSplashScreen" value="true" />
  <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="default" />
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true" />
  </feature>
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="android-minSdkVersion" value="22" />
  <preference name="android-targetSdkVersion" value="28" />
  <engine name="ios" spec="6.1.0" />
  <plugin name="cordova-plugin-geolocation" source="npm">
    <param name="GEOLOCATION_USAGE_DESCRIPTION" value="xxx" />
  </plugin>
  <plugin name="cordova-plugin-inappbrowser" />
  <plugin name="cordova-plugin-splashscreen" onload="true" />

  <plugin name="cordova-plugin-file" />
  <plugin name="cordova-plugin-file-opener2"/>
  <plugin name="phonegap-plugin-barcodescanner">
    <param name="CAMERA_USAGE_DESCRIPTION" value="xxx" />
  </plugin>
  <plugin name="cordova-plugin-camera" source="npm">
    <variable name="CAMERA_USAGE_DESCRIPTION" value="xxx" />
    <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="xxx" />
  </plugin>
  <plugin name="cordova-plugin-app-version" />
  <plugin name="cordova-plugin-exit" />
  <access origin="*" />
    <edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
      <string>xxx.</string>
	</edit-config>
	 <edit-config target="NSLocationAlwaysUsageDescription" file="*-Info.plist" mode="merge">
		<string>xxx</string>
	</edit-config>
	 <edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
		<string>xxx</string>
	</edit-config>
	 <edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
		<string>xxx</string>
	</edit-config>
	 <edit-config target="NSLocationAlwaysAndWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
		<string>xxx</string>
	</edit-config>
	 <edit-config target="CFBundleShortVersionString" file="*-Info.plist" mode="merge">
		<string>xxx</string>
	</edit-config>
  <icon src="www/res/PackageIcons.Android.ic_launcher_36_36.png" platform="android" density="ldpi" />
  <icon src="www/res/PackageIcons.Android.ic_launcher_48_48.png" platform="android" density="mdpi" />
  <icon src="www/res/PackageIcons.Android.ic_launcher_72_72.png" platform="android" density="hdpi" />
  <icon src="www/res/PackageIcons.Android.ic_launcher_96_96.png" platform="android" density="xhdpi" />
  <splash src="www/res/PackageIcons.Android.splash_200_320.png" platform="android" density="port-ldpi" />
  <splash src="www/res/PackageIcons.Android.splash_320_480.png" platform="android" density="port-mdpi" />
  <splash src="www/res/PackageIcons.Android.splash_480_800.png" platform="android" density="port-hdpi" />
  <splash src="www/res/PackageIcons.Android.splash_720_1280.png" platform="android" density="port-xhdpi" />
  <splash src="www/res/PackageIcons.Android.splash_320_200.png" platform="android" density="land-ldpi" />
  <splash src="www/res/PackageIcons.Android.splash_480_320.png" platform="android" density="land-mdpi" />
  <splash src="www/res/PackageIcons.Android.splash_800_480.png" platform="android" density="land-hdpi" />
  <splash src="www/res/PackageIcons.Android.splash_1280_720.png" platform="android" density="land-xhdpi" />
  <icon src="www/res/PackageIcons.iOS.icon.png" platform="ios" width="57" height="57" />
  <icon src="www/res/PackageIcons.iOS.icon-60.png" platform="ios" width="60" height="60" />
  <icon src="www/res/PackageIcons.iOS.icon-72.png" platform="ios" width="72" height="72" />
  <icon src="www/res/PackageIcons.iOS.icon-76.png" platform="ios" width="76" height="76" />
  <icon src="www/res/PackageIcons.iOS.icon@2x.png" platform="ios" width="114" height="114" />
  <icon src="www/res/PackageIcons.iOS.icon-60@2x.png" platform="ios" width="120" height="120" />
  <icon src="www/res/PackageIcons.iOS.icon-72@2x.png" platform="ios" width="144" height="144" />
  <icon src="www/res/PackageIcons.iOS.icon-76@2x.png" platform="ios" width="152" height="152" />
  <icon src="www/res/PackageIcons.iOS.icon-60@3x.png" platform="ios" width="180" height="180" />
  <icon src="www/res/PackageIcons.iOS.AppIcon40x40~ipad.png" platform="ios" width="40" height="40" />
  <icon src="www/res/PackageIcons.iOS.AppIcon40x40@2x.png" platform="ios" width="80" height="80" />
  <icon src="www/res/PackageIcons.iOS.AppIcon40x40@3x.png" platform="ios" width="120" height="120" />
  <icon src="www/res/PackageIcons.iOS.AppIcon50x50~ipad.png" platform="ios" width="50" height="50" />
  <icon src="www/res/PackageIcons.iOS.AppIcon50x50@2x~ipad.png" platform="ios" width="100" height="100" />
  <icon src="www/res/PackageIcons.iOS.AppIcon29x29.png" platform="ios" width="29" height="29" />
  <icon src="www/res/PackageIcons.iOS.AppIcon29x29@2x.png" platform="ios" width="58" height="58" />
  <icon src="www/res/PackageIcons.iOS.AppIcon29x29@3x.png" platform="ios" width="87" height="78" />
  <splash src="www/res/PackageIcons.iOS.Default~iphone.png" platform="ios" width="320" height="480" />
  <splash src="www/res/PackageIcons.iOS.Default@2x~iphone.png" platform="ios" width="640" height="960" />
  <splash src="www/res/PackageIcons.iOS.Default-568h@2x~iphone.png" platform="ios" width="640" height="1136" />
  <splash src="www/res/PackageIcons.iOS.Default-667h.png" platform="ios" width="750" height="1334" />
  <splash src="www/res/PackageIcons.iOS.Default-Portrait~ipad.png" platform="ios" width="768" height="1024" />
  <splash src="www/res/PackageIcons.iOS.Default-736h.png" platform="ios" width="1242" height="2208" />
  <splash src="www/res/PackageIcons.iOS.Default-Portrait@2x~ipad.png" platform="ios" width="1536" height="2048" />
  <splash src="www/res/PackageIcons.iOS.Default-Landscape~ipad.png" platform="ios" width="1024" height="768" />
  <splash src="www/res/PackageIcons.iOS.Default-Landscape@2x~ipad.png" platform="ios" width="2048" height="1536" />
  <splash src="www/res/PackageIcons.iOS.Default-Landscape-736h.png" platform="ios" width="2208" height="1242" />
  <icon src="www/res/PackageIcons.iOS.iTunesArtwork.png" platform="ios" width="1024" height="1024" />
  <icon src="www/res/PackageIcons.WP.44-240.png" platform="winphone" width="107" height="107" />
  <icon src="www/res/PackageIcons.WP.50-240.png" platform="winphone" width="120" height="120" />
  <icon src="www/res/PackageIcons.WP.71-240.png" platform="winphone" width="170" height="170" />
  <icon src="www/res/PackageIcons.WP.150-240.png" platform="winphone" width="360" height="360" />
  <icon src="www/res/PackageIcons.WP.310-240.png" platform="winphone" width="744" height="744" />
  <icon src="www/res/PackageIcons.WP.310x150-240.png" platform="winphone" width="744" height="360" />
  <splash src="www/res/PackageIcons.WP.Splash-240.png" platform="winphone" width="1488" height="720" />
</widget>

Looks like you’re off to a good start.

There is no need for the engine statement in your config.xml. You will want to to use the default, which is the latest (6.1.1).

My guess is that VoltBuilder is working fine. The ipa is getting created cleanly with no errors. I would check next for an execution error.

Use the Safari Web Inspector to see if there are any messages in the console.

And my VoltBuilder.json file

{
    "androidAlias": "xxxx",
    "androidAliasPassword": "xxx",
    "androidDname": "CN=xxx, O=xxx, EMAILADDRESS=info@xxx.com, C=xxx",
    "androidKeystore": "certificates/android.keystore",
    "androidKeystorePassword": "xxx",
    "iosDistP12": "certificates/ios_distribution.p12",
    "iosDistP12Password": "xxx",
    "iosDistribution": "certificates/distribution.mobileprovision",
    "iosPackageType": "app-store",
    "platform": "ios",
    "release": "release"
}

I’ts quite complex for me do it, since our Mac is in a rack and I access it with rdp. I can try.

Can be the problem related with some configuration in my config file? For example, is code line <preference name="phonegap-version" value="cli-9.0.0" /> correct?

The phonegap-version preference will be ignored.

If there’s a problem in the config.xml file, you’ll probably get some sort of error.

Ok, so the guilty isn’t the config.xml file… since I edited only that file and the folder tree, following your hint, I really don’t know where the problem is. If not the config, so where is the problem? Note the rest of the app is the same as before

You really need to see what’s in the Safari Console as a next step.

A lot has changed in iOS since the PhoneGap days. There are a number of new requirements, such as CORS, which need to be set properly.

I haven’t set CORS… do I have to do it in the config.xml file? Do you have an example?

CORS is unfortunately a complex issue.

Here’s a fairly complex one from a project I worked on:

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

You’ll need to work out your own. The Console is a big help with this: just see what the error messages are and fix them.

The problem could also be something other than CORS.

From which file this content is? Not config.xml I guess

Yes: it ends up looking 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:" />

There may be better ways to do this. It seems to work well for this project.

1 Like

I added these line to the config.xml I had wrongly removed:

  <plugin name="cordova-plugin-whitelist" />
  <plugin name="cordova-plugin-ios-longpress-fix" />

I thougth it can be the rigth fix, reading your last reply, but still blank screen, so I don’t think it’s this the problem. Or, is the attribute source="npm" you added for the whitelist plugin important?

Further, I have also this:

  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true" />
  </feature>

is this correct?

You really need to see if there are errors on the device. We’re blind here and just guessing.

It’s quite a problem for me reach this goal, I don’t have physical access to our mac…

Wish I could do more - but it’s hard to fix a problem you can’t see.

Half OT: I’m getting the message “Maximum daily builds for your plan have been exceeded. Upgrade here” but this happened yesterday… today I haven’t still performed an update, but now I need to do it. It’s like it isn’t reset the counter or something similar.

The builds per day is set by your Plan: https://volt.build/plan

To add to this discussion, once you have removed all javascript errors in the browser and IF you’re still getting the blank screen then you may want to check this thread:

or try adding the following line to your config.xml file:

    <preference name="scheme" value="app" />