CODEWITHSUNDEEP
google-chromesplash-screenprogressive-web-appsweb-app-manifest
abhishekcghosh
abhishekcghosh

Reputation: 743

Progressive Web Apps - Is there a way to turn off the splash-screen that Chrome shows, or at least control when the splash-screen goes away?

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?

Upvotes: 4

Views: 4502

Answers (2)

Saurabh Rajpal
Saurabh Rajpal

Reputation: 1557

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!

Upvotes: 1

Developia
Developia

Reputation: 4008

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.

Upvotes: 0

Related Questions