Progressive Web App Splash Screens

Progressive Web Apps (PWA) are starting to pick up a lot of momentum and for good reason. When developing my first PWA supporting cross platform splash screens proved to be a bigger than expected challenge! This is a quick post to help others quickly create PWA splash screens that work across both Android and iOS. The end result should be something like this:

Android and iPhone PWA Splash Screens using Google Lighthouse Logo

Splash Screen Problem

Assuming a user installed your PWA on their home screen, the default behaviour is to show a white screen until the PWA is ready. This doesn’t feel very nice for the user and adding a custom splash screen makes your PWA feel more like a native app.

Chrome for Android automatically shows your custom splash screen so 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 color value.
• The icons array specifies an icon that is at least 512px by 512px.
• The icon exists and is a PNG.

On Android this works ok, however, iOS does not support a similar method of automatically showing a splash screen. Instead you need to provide splash screens tailored for each iOS device using the <link rel="apple-touch-startup-image" /> HTML meta tag.

Targeting each iOS device to use a custom apple-touch-startup-image turns out to be quite a challenge, the approach I went with is to use media queries. Following the excellent work of Chris Coyer I ended up with the following media query and apple-touch-startup-image combination:

apple-touch-startup-image using media queries

Creating the Splash Screens

So we now have media queries to identify each size of iOS device but you still need to create all the images right… Sketch to the rescue! I created a simple Sketch file with each of the image dimensions all ready to be exported and dropped into your project.

Sketch iOS PWA splash screen generation

Broken iOS Versions

So you’ve got all those nice iOS images but there’s one issue you need to be aware of. Safari support on iOS for the apple-touch-startup-image meta tag, whilst something supported from very early on in iOS actually seems to be broken in some more recent versions of iOS. My testing on iOS Simulator has established that splash screens do not work on iOS 8, 9 & 10 but are once again working in iOS 11.

Whilst this isn’t ideal, a true PWA requires Safari to support the App Manifest and Service Workers, which are only in beta of iOS 11.3 at the time of writing this post. So I’m actually ok with the situation as a PWA splash screen on iOS will only really be of value to users of iOS 11.3+.

The Code

• Online demo: https://pwa-splash.now.sh
• Github repo: https://github.com/applification/pwa-splash-screens

The repo is a basic PWA as such it needs to run on HTTPS and have app icons which have been generated using the excellent Favicon Generator.

My name is Dave Hudson, I’m a product building UX pedant who leads development teams & writes code.

I consult under Applification Ltd and I’m available for all things React, agile and product development!