Progressive Web Apps: Custom Splash Screen

The splash screen appears instantly when your app starts up. If your app is heavy, it might take a few seconds to load the app depending on the device's configurations. By default, both Android and iOS show a plain white screen as the splash screen for web apps. It is always better to customize the splash screen to provide a complete app experience.

In order to change the splash screen of your progressive web app, you must use the configure few properties for your app to provide complete native look and feel.

Android

Chrome for Android automatically shows your custom splash screen as long as you meet the following requirements in your web app manifest:

• The name property is set to the name of your PWA.
• The background_color property is set to a valid CSS colour value.
• The icons array specifies an icon that has 512px by 512px size icon.
• The icon exists and is a PNG.

It will also show the app name below the icon using the name property. The text colour cannot be customized. It is contrast based according to this post.

iOS

iOS does not support a similar method of automatically generating a splash screen. Instead, you need to provide splash screens tailored for each iOS device using the apple-touch-startup-image HTML meta tag. We can use the media attribute and media queries to load device specific images.

<link rel="apple-touch-startup-image" href="assets/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" />

You can generate images for all the resolutions using this tool by Appsco. They also have an option where you can use only your logo and a background colour to generate these images.

Keep your app's splash screen updated with the different sizes of iOS devices available here.

Live Demo

Open the app and click on "Add to Home Screen" - Headlines App

References

Android: Custom Splash Screen

Safari: Specifying a Launch Screen Image

Comments

[Önder Ceylan 🌚]

Thanks for the detailed article Akshay! I recently published an open source CLI tool to automatically generate splash screens and icons for PWAs along with standard manifest.json entries and html tags required for iOS compatibility. It might be something useful for people who would like to automate the process: github.com/onderceylan/pwa-asset-g...