Flash between splash screen and final app load for some Android phones

0
votes

I have a PhoneGap/Sencha Touch app that has three basic states on app load: splash screen, webview is loaded but Sencha Touch is loading, and Sencha Touch is fully loaded.

On some Android phones (such as my Kyocera Rise), everything goes smoothly. I see the splash screen, then on deviceready, navigator.splashscreen.hide() is successfully called. The html/css hardcoded loading indicator that I have on index.html is shown while Sencha Touch is loading, then when the Sencha Touch code is loaded it shows the fully-loaded app.

However, on other phones (such as my Galaxy S3), things do not work so well. I see the splash screen, then deviceready the splashscreen is hidden. However, the hardcoded loading indicator on index.html does not appear. All I see is a white (or sometimes black) screen. When the Sencha Touch code is fully loaded, the app does successfully appear, however.

Here's what I've tried: - Removing various pieces of code. Removing the Sencha Touch code entirely does get rid of the flash and lets the hardcoaded loading indicator on index.html appear.

  • Putting a few-second delay on when the Sencha Touch code fires. Didn't work
  • Firing a javascript alert on deviceready gets rid of the flash and lets the loading indicator appear.
  • Replacing the loading indicator with just text: <body>loading</body>. Didn't work.
  • Forcing index.html to rerender by changing its background color as well as switching between display:none and display:block. Didn't work.
  • Removing the deviceready listener and just running navigator.splashscreen.hide() right after the <body> markup on index.html. Didn't work.

Based on this information, it looks like this has something to do with Sencha Touch, since completely removing the Sencha Touch code lets the loading indicator show. Maybe has something to do with rendering as well, given that the alert indicator also lets the loading indicator show. However, that's all I've got. It looks like other people have encountered this sort of thing, primarily on iOS and Blackberry though. I haven't found any proposed solution that I've seen elsewhere that seems to fix my issue; a lot of it is just the fact that people used to not be able hide the splashscreen on deviceready.

Is there something I'm missing here? Why might this sort of thing be happening? Why would it only happen on some Android phones?

2
androidcordovasencha-touchsencha-touch-2.3
Try to move navigator.splashscreen.hide() to Application.launch method. Also, try your code in Ripple Emulator, it might help to understand what causes the problem: chrome.google.com/webstore/detail/ripple-emulator-beta/… – Baidaly

2 Answers

1
votes

You might find yourself spending quite a long time trying to perfect this. We know the first launch of the app is rather important for UX, however (as you correctly identified) the huge number of Android devices/OS versions out there actually make it a rather daunting task. We've found one good solution is to actually hide the Sencha app while it's loading, rely on your index.html loading indicator, and then delay show the Sencha app itself.

It definitely sounds like this might be a solution for you, given you have confirmed you don't see a delay going between the Android splashscreen and the index.html loader. Depending on how exactly you are initializing your Sencha app, you probably want to hide the Ext.Viewport. I would start by putting Ext.Viewport.hide() into your initialization method. If this solves your issue, just show the Viewport again shortly delayed upon Ext.application.Launch.

0
votes

You can change sencha base color as your splash screen , don't delay app loading or dont forcefully show splashscreen.

use this css :

body {
 height: 100%;
 background-color: #1985D0;// change this as per your splash screen
 }