Jonathan Li: ios cordova CDVLaunchScreen storyboard and splash screen plugin

When creating an ios cordova project with cordova (6.5.0), the xcode project generated by
cordova create
command will include a resource file "CDVLaunchScreen.storyboard". This storyboard has a image view in it, which refers to image resource "LaunchStoryboard", however by default, there is no image resource included in image.xcassets. Besides, the CDVLaunchScreen.storyboard is not referred or used in any places in the generated xcode project.

As a result, the cordova ios project still uses the old launchImage resource to display the app starting
splash screen as shown below

Usually, this does not matter for the application. However, if running the project on ipad pro device's UIWebView, it will shows the useragent is iphone instead of ipad. To demo this issue, update index.html and index.js with below changes and then run it on ipad pro device, the screen shot shows the user agent is IPHONE

Index.html

<body>

<h1>Apache Cordova</h1>

<label id="useragent"></label>

<p class="event listening">Connecting to Device</p>

<p class="event received">Device is Ready</p>

</div>

</body>

Index.js

// Update DOM on a Received Event

receivedEvent: function(id) {

var parentElement = document.getElementById(id);

var listeningElement = parentElement.querySelector('.listening');

var receivedElement = parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');

receivedElement.setAttribute('style', 'display:block;');

document.getElementById('useragent').innerHTML = navigator.userAgent;

console.log('Received Event: ' + id);

}

One way to workaround the usage agent issue is from the xcode project's General setting page, set "Launch Screen File" to "CDVLaunchScreen.storyboard". Even if no image resource is available, the user agent for ipad pro will show the correct value as below

Note in the xcode project, before the "Launch Screen File" is set to "CDVLaunchScreen.storyboard", if the application is already deployed to the ipad pro device, then after the configuration change, the useragent will still show as IPHONE in the testing. The reason is cordova stores the useragent into ios UserDefault, so it will load the saved value as webView's useragent.

In order to update the user agent after changing the "Launch Screen File" setting, the bundle version needs to be updated. In the project's General settings screen, the Identitiy Build number (CFBundleVersion in info.plist file) needs to be set to a new version to reset the saved user agent value. After the version is updated, the project will show the right ipad user agent on ipad pro device.

Cordova Splash Screen plugin
Although manually updating the xcode project setting, and assign the launch image resource for LaunchStoryboard image view is fine, the same function is also available in cordova ios splash screen plugin:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

Basically, in cordova config.xml, under platform ios section, you will need to add the below splash items

<allow-intent href="itms:*" />

<allow-intent href="itms-apps:*" />

<splash src="res/screen/ios/Default@2x~universal~anyany.png" />

<splash src="res/screen/ios/Default@2x~universal~comany.png" />

<splash src="res/screen/ios/Default@2x~universal~comcom.png" />

<splash src="res/screen/ios/Default@3x~universal~anyany.png" />

<splash src="res/screen/ios/Default@3x~universal~anycom.png" />

<splash src="res/screen/ios/Default@3x~universal~comany.png" />

</platform>

And then add those image resource png files into projectRoot/res/screen/ios folder, the image size should follow the below table

filename	size	width	height
Default@2x~universal~anyany.png	2732x2732	any	any
Default@2x~universal~comany.png	1278x2732	com	any
Default@2x~universal~comcom.png	1334x750	com	com
Default@3x~universal~anyany.png	2208x2208	any	any
Default@3x~universal~anycom.png	2208x1242	any	com
Default@3x~universal~comany.png	1242x2208	com	any

Once the resource is added and config.xml is updated, then add the splash screen plugin into the cordova project. You will also need to run

cordova prepare

to make the CDVLaunchScreen.storyboard set to the "Launch Screen File" field, you can verify this is set properly by checking the xcode project's genearl settings.

With this change, the ipad pro UIWebView should show its user agent properly as ipad.

For more information, please refer to cordova splash screen pluguin at

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/