This is a migrated thread and some comments may be shown as answers.

Splash Screen Overview

7 Answers 297 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
David
Top achievements
Rank 1
David asked on 19 Jun 2013, 06:30 PM
Could someone point me at some documentation or let me know about how the splash screen works with Icenium apps?  I am at the point where I am ready to release my app but I can't seem to get the splash screen to work appropriately.

When I first started my app (and it was pretty small) the splash screen would only be removed after all of the code had run (I had a script tag at the end of my index.html file at this point) and you would not see a flash of the initialized code.  However after I have expanded the app and am using requireJs to manage all of my js files (there are lots, I tried to mimic the kendo mobile music store structure), the splashscreen will vanish before the app is styled.

I just don't understand at what point the app closes the splash screen , I saw a post recommended on android to call navigator.splashscreen.hide() in response the 'deviceready' event, I do that and I see the same behavior there (previously on android the splashscreen would linger for quite some time, well beyond what it should take for an app to start).  Now it removes the splashscreen but the app isn't styled (at least it is consistent with the iOS app).

Perhaps I am doing something silly in my code (I find it hard to believe nobody else would have seen this yet), I have removed all includes of external resource files (no more google api stuff for geocoding on my app) and I still see the same issues.  It seems like after the call to kendo.mobile.Application there is still some delay before the app styling occurs, could this be a function of the number of views I have in the application?

7 Answers, 1 is accepted

Sort by
0
Steve
Telerik team
answered on 20 Jun 2013, 02:38 PM
Hello David,

In Android the splash screen is hidden ten seconds after the application is started and this behavior is Cordova's default. If you want to modify it, please use the Cordova Splashscreen API e.g. if you want to delay hiding the splash screen for 4 seconds, you can do this in your deviceready event handler:

setTimeout(function() {
    navigator.splashscreen.hide();
}, 4000);

Note that splash screen is part of the final app package and can't be tested with Icenium Ion. You will need to build your app and deploy it on a device to test.

Regards,
Steve
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.
0
David
Top achievements
Rank 1
answered on 21 Jun 2013, 07:32 PM
Please ignore this post
For some reason this post showed up now (it is the same as the ones below, I had an error message when trying to submit it, but it came back like a faithful pet :) ), I cant mark it as the answer so I am editing it ...
0
Accepted
David
Top achievements
Rank 1
answered on 21 Jun 2013, 07:33 PM
Thanks Steve,
  I actually had a bit larger problem.  Turns out the culprit was requirejs (I am surprised nobody else ran into this before).  It may have been worse for me just due to the number of javascript files i was loading (30+) but in my testing it seems to occur regardless of how many javascript files require was loading.

  The solution to this problem that I eventually found was to use the requireJS optimizer to bundle everything into a single javascript file.  The downside is that I now have to run this tool and upload the combined file before I can build a release build of the app.  
0
David
Top achievements
Rank 1
answered on 21 Jun 2013, 07:34 PM
Apparently there is a rather small limit on post size for these forums ... here is more info:
For anybody else having this problem I found http://requirejs.org/docs/optimization.html#onejs to be really useful.  Here is the file I am using with my bundle options for anybody who needs to do something similar:
//require_bundle.js
({
    name: "main",
    out: "main-built.js",
    baseUrl: "scripts/",
    mainConfigFile: "scripts/main.js",
    optimize: "none",
    paths: {
        requireLib: "require"
    },
    include:"requireLib"
})

In node I can just run r.js -o require_bundle.js at the root of my application (once I export and extract it to my hard drive).  I then just upload the main-built.js file and include that file instead of requireJS at the end of my index.html file.
0
David
Top achievements
Rank 1
answered on 24 Jun 2013, 01:48 PM
Well that is strange, the first post I tried to submit gave me an 'invalid content' error message or something along those lines.  So I broke it up into 2 posts.  2 days later the original one just showed up, above the other 2.  There may be something goofy going on with the forum software, I will remove the other posts :).
0
Rahul
Top achievements
Rank 1
answered on 05 Feb 2016, 10:27 AM
white screen is opening first while opening the android app.please provide me the solution of this bug.
0
Dimitrina
Telerik team
answered on 09 Feb 2016, 12:57 PM
Hello Rahul,

Would you please check whether the core SplashScreen plugin is configured in the project properties?
For further basic information on using SplashScreen, you can refer to the detailed explanation in the forum thread on: Can someone give me a summary of how splash screens "happen" in Appbuilder?

Regards,
Dimitrina
Telerik
 

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

 
Tags
General Discussion
Asked by
David
Top achievements
Rank 1
Answers by
Steve
Telerik team
David
Top achievements
Rank 1
Rahul
Top achievements
Rank 1
Dimitrina
Telerik team
Share this question
or