SplashScreen Prefs for delay quirks

[hollyschinsky]

Currently this project won't run quite right off the bat for iOS (and potentially other platforms other than android) due to the config.xml file's current preferences for Splash Screen. It will hang on the splash screen indefinitely.

When these preferences are specified:

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

There's a quirk in the Splash Screen plugin that requires you to also add some code like the following after deviceready to delay the splash screen for a certain number of seconds (in this case 1):

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

This could be added into the starter project in the app.js startApp() function.

Or you could move those preferences into the android platform in the config.xml file specifically:

    <!-- ANDROID -->
<platform name="android">
          <preference name="SplashScreenDelay" value="10000" />
          <preference name="AutoHideSplashScreen" value="false" />
           ...
</platform>

I plan to create a PR to help fix up the config.xml file and whatever else based on the other things I opened this morning but wanted to document these issues at least for now in case others run across them. :)

[dcousens]

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

Thanks for the report @hollyschinsky! I think the above solution is fine, and it is probably the most platform consistent?

Ideally the splash screen would only be open for as long as necessary by the device, does the above facilitate that?

[hollyschinsky]

Yes @dcousens, I think overall it's a better approach to programmatically handle it using the splash screen plugin for better control.

If you're looking for the least possible amount of display time, you could first try to hide it immediately upon deviceready with just the navigator.splashscreen.hide() line itself and no timeout function.

It's really dependent on how much time any given app needs to load as far as including it in some kind of timeout or not. You'll know if it's not enough time if you see something display between the splash screen and the main app's view, like a plain white screen (or the default webview background color) and can set a timeout delay as needed.

[dcousens]

@hollyschinsky what would be the settings to enforce "forever displayed" on both devices?
I feel like that would be the best default configuration if we are implying users should use .hide().

[hollyschinsky]

You could just not use the plugin or timeout at all and let the default native behavior occur.

[jossmac]

I think in a similar way to how the KeystoneJS generator works we should add comments explaining how to handle splash screens properly, but let the the default behaviour occur.

Thoughts @dcousens, @hollyschinsky, @JedWatson?

[dcousens]

@jossmac I think that would work well, though, I'm not familiar with what would classify as the default behaviour?

[jossmac]

Remember before we started using the plugin/timeout in our apps there was that white flash between the splash screen and the loaded app?

[dcousens]

Right, we certainly don't want that. What I'm thinking is we find the equivalent configuration for an infinite timeout, such that it never goes away unless you ask it to.
IMHO, that makes the path easy.

[jossmac]

Wouldn't that be confusing for someone unfamiliar with cordova, touchstone, et al.? Imagine this experience:

• clone app
• cordova prepare
• splash screen for dayz