A custom splash screen makes your Progressive Web App (PWA) feel more like an app built for that device. By default, when a user launches your PWA from the home screen, Android displays a white screen until the PWA is ready. The user may see this blank, white screen for up to 200 ms. By setting up a custom splash screen, you can show your users a custom background color and your PWA's icon, providing a branded, engaging experience.
How the Lighthouse splash screen audit fails #
Lighthouse flags pages that don't have a custom splash screen:
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
How to create a custom splash screen #
Chrome for Android automatically shows your custom splash screen as long as you meet the following requirements in your web app manifest:
nameproperty is set to the name of your PWA.
background_colorproperty is set to a valid CSS color value.
iconsarray specifies an icon that is at least 512x512 px.
- The specified icon exists and is a PNG.
See Adding a Splash Screen for Installed Web Apps in Chrome 47 for more information.
While Lighthouse's audit will pass when a single 512x512 px icon is present, there is some disagreement about what icons a PWA should include. See Audit: icon size coverage for a discussion about the pros and cons of different approaches.