3

Chrome introduced splash-screens as a PWA feature to make it look and feel more like native apps. It generates the splash-screen from name, icon and bg_color in the web app manifest. More details here:

While all of that is fine, there is no proper documentation on how long Chrome decides to keep the splash-screen visible.

Ideally I'd imagine that it should be till the point something is meaningful painted on the screen (just the above-the-fold stuff) but in my experience it seems like Chrome keeps this splash-screen for a quite long time (might as well be till page load?)

This is pretty bad for people browsing my website from slow connections - previously at least they could see something working and happening on the screen, now they just see a static image (splash-screen with icon and name) - they don't know how long it will take to open the web app, can easily get bored and drop-off. This is very risky.

Can I control when the splash-screen goes away or even disable it altogether?

abhishekcghosh
  • 723
  • 6
  • 11

2 Answers2

1

You can register an event of DOMContentLoaded, which is the first event fired, even before your other stuff like images, css and all are still getting loaded. Using this, you can fade out / remove the splash screen even (may be) before when your first paint happens (depending on your site requirements/implementation). Check out an example here, where he tries to add an animation to the fading of the splash screen rather than a simple transition. You can definitely try removing the splash screen earlier on similar grounds.

P.S.: Couldn't find anything to disable/time out splash screen. Hence the work around!

Saurabh Rajpal
  • 1,537
  • 9
  • 14
0

It seems that your first page is taking too long to be ready (first paint), maybe you have:

  • A big HTML file
  • Loading stylesheets synchronously
  • Javascript take long time to settle

Check these things see if resolving each one could help.

You can see other PWA apps, like twitter how they are loading pretty much fast in webAPK and learn from them using chrome dev-tool on your desktop.

Developia
  • 3,928
  • 1
  • 28
  • 43
  • Checked the Chromium source that indicates the splash should go away when the first non-empty paint happens, but in my experience I've seen on a lot of websites it goes away after the page loads (could be the window load event fire). [source-code](https://cs.chromium.org/chromium/src/chrome/android/java/src/org/chromium/chrome/browser/webapps/WebappSplashScreenController.java) – abhishekcghosh May 11 '18 at 11:48