Is not configured for a custom splash screen
Published on • Updated on
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:
- The
nameproperty is set to the name of your PWA. - The
background_colorproperty is set to a valid CSS color value. - The
theme_colorproperty is set to a valid CSS color value. - The
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.
Resources
Source code for Is not configured for a custom splash screen audit
Updated on • Improve article