Progressive Web App Splash Screens

Dave Hudson
Feb 21, 2018 · 3 min read

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:

Image for post
Image for post
Android and iPhone PWA Splash Screens using Google Lighthouse Logo

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

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.

Image for post
Image for post
Sketch iOS PWA splash screen generation

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 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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store