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:
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:
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 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
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.
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+.
- 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!