Phonegap Build (config.xml) and iPad splashscreen - ios

I'm trying to configure a splashscreen for a landscape mode ipad app using phonegap build. I used the specification mentioned in phonegap documentation (https://build.phonegap.com/docs/config-xml), however it doesn't seem to work. It seems to be a problem with the splashcreen tag, because the icons work just fine.
I'm running an iPad with iOS 5.1. Has anyone had a similar problem ?
Any help would be much appreciated.
Here is my config.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.myapp"
version = "1.0.0">
<name>myapplication</name>
<description>myapplication</description>
<author href="https://www.myapp.org" email="my#app.org">myapp</author>
<preference name="orientation" value="landscape" />
<gap:splash src="gfx/ios/splashscreen_landscape.png" width="1024" height="748"/>
<gap:splash src="gfx/ios/splashscreen_portrait.png" width="768" height="1004"/>
<icon src="gfx/ios/icon57x57.png" width="57" height="57"/>
<icon src="gfx/ios/icon72x72.png" width="72" height="72"/>
<icon src="gfx/ios/icon114x114.png" width="114" height="114"/>
</widget>

Turns out that height is 768 instead of 748 (no status bar), so i ended up with this tag in my config.xml:
<gap:splash src="gfx/ios/splashscreen_tablet.png" width="1024" height="768"/>
And the splashscreen_tablet.png, must also be rotated by 90 degrees. It should be a 768x1024 png. It works the same way offline webapps do.

Related

Cordova - iOS 10 - Splash Screen not working

I'm using Cordova 6.5.0 with platform ios 4.3.1. I have installed the SplashScreen plugin and am using Legacy Launch Images
I have prepared splash screen images of the below sizes, added them in config.xml and placed them in project_folder/res/screen/ios
<splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screen/ios/Default#2x~iphone.png" width="640" height="960"/>
<splash src="res/screen/ios/Default-568h#2x~iphone.png" width="640" height="1136"/>
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
<preference name="SplashScreenDelay" value="10000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
After building the app, I can see in Xcode that all the above images are reflected in the LaunchImage asset catalog under unassigned category.
When I run the app on iPhone 5 (iOS 10), I get a launch screen followed by a white screen (with loading indicator) for 1 second, followed by the app's main screen. Also in the Xcode console, I can see the below warning
WARNING: The splashscreen image named Default-568h was not found
Whereas I expect it to display the splash screen for 10 seconds (SplashScreenDelay)
Follow the syntax in Legacy Launch Image. There is no <splash src="res/screen/ios/Default-568h.png" width="640" height="1136"/> in the config.xml

How to set splash screen for iOS in PhoneGap

I am using PhoneGap for creating iOS application for iOS9+. As per guide line I have added following code in Config.xml to set the splash screen.
// set the cordova plugin
<plugin name="cordova-plugin-splashscreen" source="npm" spec=">1.0.0" />
// set splash screen for iPad only
<platform name="ios">
<gap:splash gap:platform="ios" height="2048" src="res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<gap:splash gap:platform="ios" height="2048" src="res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<gap:splash gap:platform="ios" height="768" src="res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<gap:splash gap:platform="ios" height="1536" src="res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" />
</platform>
Then I used following command in 'Terminal' to generate iOS platform
phonegap build ios --device
It copies all the splash images in iOS platform.
But it show default Phonegap splash screens image when I launch the app. I checked in iOS project 'Images.xcassets'-> 'LaunchImage, it is showing default PhoneGap images. It is not showing splash Image which I mentioned in Config.xml file. How do I set the splash images using config.xml for iOS?
First add the Splash screen plugin
cordova plugin add cordova-plugin-splashscreen
Then in config.xml add these lines.
<!-- iOS splash screen -->
<!-- iPad -->
<splash src="www/res/screen/ios/Default-Portrait.png" platform="ios" width="768" height="1024" />
<splash src="www/res/screen/ios/Default-Landscape.png" platform="ios" width="1024" height="768" />
<!-- Retina iPad -->
<splash src="www/res/screen/ios/Default-Portrait#2x.png" platform="ios" width="1536" height="2048" />
<splash src="www/res/screen/ios/Default-Landscape#2x.png" platform="ios" width="2048" height="1536" />
<!-- Default splash screen -->
<splash src="splash.png" />
Make sure of the image width and height should be same as it is defined in config.xml.
or try default splashscreen.
Just keep full size splash screen image where your config.xml is located it will copy the splash.png file for all platform it is not recommended this will increase the app size but you can check if that works.
Cheers.
You need to change/replace the image files in splash screen directory (www/res/screen/ios/).
By default it contains images of phone gap

Submit to app store phonegap app icon issue

I have developed a phonegap application which is running absolutely fine on iPhone. Now, I want to submit the app to the appstore. Following is the procedure I am following to submit my app:
Open Xcode and archive the project
Click on validate (which is successful)
Click on Submit to appstore (which is where I am getting the following error)
Not sure, where I am going wrong. And I have written the following in config.xml and all the icons of perfect dimensions are there in the icons folder including icon.png of 57x57 dimension:
<platform name="ios">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="Resources/icons/icon-60#3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="Resources/icons/icon-60.png" width="60" height="60" />
<icon src="Resources/icons/icon-60#2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="Resources/icons/icon-76.png" width="76" height="76" />
<icon src="Resources/icons/icon-76#2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="Resources/icons/icon-40.png" width="40" height="40" />
<icon src="Resources/icons/icon-40#2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="Resources/icons/AppIcon57x57.png" width="57" height="57" />
<icon src="Resources/icons/AppIcon29x29.png" width="29" height="29" />
<icon src="Resources/icons/icon.png" width="57" height="57" />
<icon src="Resources/icons/icon#2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="Resources/icons/icon-72.png" width="72" height="72" />
<icon src="Resources/icons/icon-72#2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="Resources/icons/icon-small.png" width="29" height="29" />
<icon src="Resources/icons/icon-small#2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="Resources/icons/icon-50.png" width="50" height="50" />
<icon src="Resources/icons/icon-50#2x.png" width="100" height="100" />
</platform>
The issue was the images were interlaced and so the error. Make sure the png files that you upload are NOT INTERLACED.
This fixed my issue.
I had got this one before. I resloved this by: Opening images.xcassets folder in Xcode, tapping on AppIcon and then manually dragging and dropping the respective app icons in each field. Luckily I had comps for all fields and I was able to solve it. Hope this information help.

PhoneGap Build 3.4.0 icon issue on uploading with iOS

I've done this before without issue with another app, and the development version works fine on an iPhone 4, iPhone 5S and an iPad Mini all running the latest version of iOS7. I'm using the same set-up as for the other app but for this one but I get this error:
ERROR ITMS-9000: "Invalid Image Path - No image found at the path referenced under key 'CFBundleIconFiles':'icon.png'" at SoftwareAssests/SoftwareAsset (MZItmspSoftwareAssetPAckage)
This error is repeated once in Application Loader.
My icon.png is in the root folder, as it should be (I understand) and this the relevant bit of my config.xml:
<!-- Icons -->
<!-- Android -->
<icon src="icon.png" />
<!-- iOS -->
<!-- iPhone / iPod Touch -->
<icon src="img/ios/icon/icon.png" gap:platform="ios" width="57" height="57" />
<icon src="img/ios/icon/icon-60.png" gap:platform="ios" width="60" height="60" />
<icon src="img/ios/icon/icon-60#2x.png" gap:platform="ios" width="120" height="120" />
<!-- iPad -->
<icon src="img/ios/icon/icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="img/ios/icon/icon-76#2x.png" gap:platform="ios" width="152" height="152" />
<!-- Settings Icon -->
<icon src="img/ios/icon/icon-small.png" gap:platform="ios" width="29" height="29" />
<icon src="img/ios/icon/icon-small#2x.png" gap:platform="ios" width="58" height="58" />
<!-- Spotlight Icon -->
<icon src="img/ios/icon/icon-40.png" gap:platform="ios" width="40" height="40" />
<icon src="img/ios/icon/icon-40#2x.png" gap:platform="ios" width="80" height="80" />
<!-- Splash Screens -->
<!-- Android -->
<gap:splash src="splash.png" />
<!-- iPhone and iPod touch -->
<gap:splash src="img/ios/splash/Default.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="img/ios/splash/Default#2x.png" gap:platform="ios" width="640" height="960" />
<!-- iPhone 5 / iPod Touch (5th Generation) -->
<gap:splash src="img/ios/splash/Default-568h#2x.png" gap:platform="ios" width="640" height="1136" />
<!-- iPad -->
<gap:splash src="img/ios/splash/Default-Portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="img/ios/splash/Default-Landscape.png" gap:platform="ios" width="1024" height="768" />
<!-- Retina iPad -->
<gap:splash src="img/ios/splash/Default-Portrait#2x.png" gap:platform="ios" width="1536" height="2048" />
<gap:splash src="img/ios/splash/Default-Landscape#2x.png" gap:platform="ios" width="2048" height="1536" />
I added an extra icon.png in img/ios/icons just to test things, because that's what works for iOS6 and because there is no other "pure" icon.png in the img/ios/icons folder. It shouldn't need it though as the default
in the root folder should work.
Can anyone tell me what the problem is?
I found a solution. It's not (afaik) the "proper" way to do it - my version should work - but it was given to me by a PGB employee.
I added
<icon src="icon.png" gap:platform="ios" width="57" height="57"/>
I'm posting this because until the PGB iOS icon issue is fixed (and many people are having the same) this will be invaluable.
And when the issue is fixed it will be obsolete. Such is life.

"Missing required 57x57 icon" for iOS on PhoneGap Build

I'm using PhoneGap Build and I have all the necessary icons defined in config.xml
<icon src="icon.png" width="57" height="57" />
<icon src="ios/icon57.png" gap:platform="ios" width="57" height="57" />
<icon src="ios/icon72.png" gap:platform="ios" width="72" height="72" />
<icon src="ios/icon114.png" gap:platform="ios" width="114" height="114" />
<icon src="ios/icon120.png" gap:platform="ios" width="120" height="120" />
<icon src="ios/icon144.png" gap:platform="ios" width="144" height="144" />
<icon src="ios/icon152.png" gap:platform="ios" width="152" height="152" />
but when publishing the app I get the error message:
ERROR ITMS-9000: "Missing required icon file. The bundle does not
contain an app icon for iPhone / iPod touch of exactly '57x57' pixels, in .png
fomat for iOS versions < 7.0."
A few month ago I had similar issues with icons. I spent lots of time trying adding/removing some, and I think I basically ended removing all icons except the 57x57 one. That was fine but the icon didn't look that nice on retina displays. I hoped that problem would have been fixed by now.
FYI I was previously using PhoneGap 2.9 and this time it's 3.1.
Simply removing the default icon <icon src="icon.png" width="57" height="57" /> from the config.xml file did the trick for some reason.
It seems quite a lot of people are having troubles with icons too, and that solution was mentioned a few times (for different PhoneGap versions) on the community.phonegap.com website, like link. It's also said to define the iOS icons before any other in the config.xml file (which was already the case for me). I tried just putting the default icon after the iOS specific ones but I still got the same error.

Resources