Sponsored By Kids In Touch

Polish Your App Launch with Cordova Splashscreen Plugin

We all know that Apple frowns on using the Splashscreen as an advertisement for your app. At the same time, just about everyone does it. Quite often in hybrid apps, the launch of an app can look a little unpleasant while the view loads. Frequently, there's a white flash during the transition between the splash screen dispaying and the app content being ready.

I've found this to be the case with most of the Ionic Framework apps I've worked on. Most of the time, this is due to AngularJS initializing the view. Yes, you can use ng-cloak to help improve this, but I've had more success using the splashscreen to cover the app loading process until it is completed.

Setting Up Cordova Splashscreen Plugin

First, we're going to install the Cordova Splashscreen plugin.

cordova plugin add org.apache.cordova.splashscreen  

With the plugin installed, we now need to tell Cordova to not let the Splashscreen "autohide". In your config.xml, add this preference:

<preference name="AutoHideSplashScreen" value="false" />  
<preference name="SplashScreenDelay" value="10000" />  

Notice the additional preference SplashScreenDelay. This ensures the splashscreen remains hidden for up to 10 seconds on Android.

Now, the splashscreen will not automatically hide after the OS loads the app. With iOS, the splashscreen will continue to be displayed until you tell it to buzz off.

Once the app is loaded successfully, you need to tell the splashscreen to go away. You do this in the AngularJS controller for your app's main page.

$scope.$on('$ionicView.loaded', function() {
  ionic.Platform.ready( function() {
    if(navigator && navigator.splashscreen) navigator.splashscreen.hide();
  });
});

The code above is waiting for Ionic's special $ionicView.loaded event to ensure the app's current view has completely transitioned. Then, it makes sure the ready event has been fired before hiding the splashscreen.

WARNING Without this final ready check, the Angular app may already be initialized before the device has fired the ready event. If so, it would call the navigator.splashscreen.hide() method before the plugin has had a chance to load. If this happened, your app's splashscreen will be stuck and will never go away.

Depending on how your app loads the initial content, you may want to include a $timeout or put this step in a callback. For example, if you are waiting for content to load from a service, you might want to delay this step by a few hundred milliseconds to allow content to load. Be careful to not wait too long. This will make your app appear unresponsive.

Polishing Up the Transition

With the changes above, the app's appearance will be improved drastically. You will no longer have that ugly white flash between the splash screen and the app's first view.

However, we can improve the app's appearance even more with a few additional config.xml preference changes.

<preference name="ShowSplashScreenSpinner" value="false" />  
<preference name="FadeSplashScreen" value="true" />  
<preference name="FadeSplashScreenDuration" value="1.0" />  

The ShowSplashScreenSpinner setting will prevent a default "loading" spinner from appearing over the splashscreen.

Using the FadeSplashScreen preference will make the splashscreen slowly fade from view. However, the default fade value is 0 seconds. So, you need to add the FadeSplashScreenDuration preference to specify the duration.

These two videos will demonstrate the improvement to the app's launch process. The first video relies on the OS to hide the splashscreen. You can see the ugly whiteflash as the app loads and then see the icons appear in kind of a jerky fashion. The second video shows the improvements to the load process.

Standard Load Process

Splashscreen Fade from Calendee on Vimeo.

Improved App Load Process

Splashscreen Fade from Calendee on Vimeo.

Other Options

Clearly, there are other ways to accomplish this same task. The Ionic View app for example has a lovely loading process. I'm not certain how it's done, but I am guessing the default state for the app is simply a view with a logo (SVG probably). Once the app is completely load, they use a navigation transition to move to the main app list.

If anyone has suggestions or ideas to improve this process, please let me know on Twitter.