Splash Screen

If you use a custom splash screen for your PWA you will make it look more like an app.

PWA

Why set up a custom splash screen?

If you use a custom splash screen for your PWA (Progressive Web App) you will make it look more like an app created specifically for the device it is opened on.

When the PWA is launched by the user it takes a few moments to load, during which time a blank screen is shown (for 200 ms at most).

You could then exploit this waiting time by using a monochrome background with the PWA icon, thus making the loading less anonymous.

 

How the SeoChecker splash screen audit is displayed

If your page has no custom splash screen, SeoChecker will notify it.

splash screen

 

How can I create a custom splash screen?

Be sure to follow these requirements in your Web App Manifest:

  • you need to specify an icon that is minimum 512x512 px in the icons array;
  • you should set to a valid CSS color value the background_color property;
  • for the icon use a PNG;
  • be sure that name property matches the name of the PWA.

Share this Guide

Did you like it? Share it!

Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page