I primarily use Sencha Touch for mobile applications, and if you’ve used Sencha Touch before you will have seen the blue loading screen with three flashing dots. If you have ever used a native application before, you will also be familiar with a splash screen – the full screen graphic that is briefly displayed after an applications launch.
In the case of a natively packaged application, I’m not a fan of using these two screens in conjunction. The reason for this is that it looks bad to go from one loading screen (the initial splash screen) to another (the Sencha Touch loading screen). This is not really a problem if your application is packaged for the web, but if you’re creating a native package for iOS or Android with PhoneGap Build (or through any method for that matter) then you will be forced to deal with the splash screen.
It would be a better solution to create a custom loading screen for Sencha Touch that would match the initial splash screen so the transition for the user is less drastic. Indeed, the intention of the splash screen is to give the user a smoother experience. The splash screen is launched immediately as the user taps your applications icon, giving them immediate feedback and a feeling that the application is loading instantly – this removes the need for a ‘Please wait…’ screen as the application boots up. To break way from this pattern is counter intuitive, we don’t want to just throw the user into an alternative loading screen.
It can take quite a bit of effort to create a solution that works across all device resolutions though. In most cases, I opt for using PhoneGap’s Splashscreen plugin to display the initial splash screen for the entire period. This might not be an appropriate solution if the application takes particularly long to load however, you will notice a lot of games for example will match their splash screens to their loading screens, but then provide additional feedback to the user as the game loads:
Peggle Loading Screen
Using the Splashscreen Plugin
The Splashscreen plugin gives you more control over the display of your applications splash screen. To include the Splashscreen plugin in your project, simply add the following line to your config.xml file:
<gap:plugin name="org.apache.cordova.splashscreen" />(If you’re unfamiliar with how to set up a project using PhoneGap Build, check out this post first)
You are supposed to be able stop the splash screen from being automatically hidden with PhoneGap Build preferences on iOS by using:
<preference name="AutoHideSplashScreen" value="false" />and delaying the hiding of the splashscreen on Android with:
<preference name="SplashScreenDelay" value="3000" />in the config.xml file. This does not work entirely though, the graphic is still automatically hidden after a short period of time but the loading indicator remains however. As a workaround, I set the Sencha Touch loading screen to be a solid colour that matches the splash screen graphic to fill the remainder of the loading time (which is usually not very long). Once the application is launched, we can call the following function to disable the splash screen:
navigator.splashscreen.hide();In the case of Sencha Touch, I place this inside of the applications launch function. You can see the full documentation for the Splashscreen plugin here.
One more thing before I go…
Another issue you’re probably going to run into is the file size of the splash screens. PhoneGap Build requires that you package a lot of different splash screens for the different resolutions of all the devices you’re building for. Even with image optimisation this can increase the file size by quite a lot (as images are redundantly included in packages where they are not required). Luckily, PhoneGap Build has since implemented .pgbomit as a solution to this – you can read about it [here][3].
[3]: http://www.joshmorony.com/using-phonegap-builds-pgbomit-to-drastically-reduce-file-size/ ‘Using PhoneGap Build’s .pgbomit to Drastically Reduce File Size’