Splash Screen Overview

8 posts, 1 answers
  1. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 19 Jun 2013 Link to this post

    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?
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 20 Jun 2013 Link to this post

    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.
  3. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 21 Jun 2013 Link to this post

    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 ...
  4. Answer
    David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 21 Jun 2013 Link to this post

    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.  
  5. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 21 Jun 2013 Link to this post

    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.
  6. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 24 Jun 2013 Link to this post

    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 :).
  7. Rahul
    Rahul avatar
    1 posts
    Member since:
    Jan 2016

    Posted 05 Feb in reply to David Link to this post

    white screen is opening first while opening the android app.please provide me the solution of this bug.
  8. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 09 Feb Link to this post

    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.

     
Back to Top