How Do Progressive Web App Splash Screens Work?

Last Updated - Sat Jan 09 2021

With a progressive web application the splash screen is displayed if there is a delay ‘spinning up the site’. This is typically because the browser is in a cold start and does not have everything primed to just request and render the page.

The splash screen used by most browsers is composed from data in the manifest file, the name, background_color and what it deems is the best sized icon specified in the icon list. The service worker plays no role in the splash screen experience.

If you have a single page application you will have excess delay rendering your site after the browser passes that point. Here you might want to embed a default ‘splash screen experience’ in your HTML that just uses HTML and CSS to render, well maybe an image too. JavaScript is the limiting agent in single page apps and with many of the frameworks adds 20-40 seconds to the rendering cycle, so having something other than a blank page helps a little.

So what do you do to drive a controlled splash screen experience for your progressive web apps?

The Web Manifest File

In the past, as you will see shortly for iOS, we have used META tags in a page's HEAD element to drive application theming to the browser. This includes colors, icons and the splash screen for some browsers.

With progressive web applications you must have a valid web manifest file. In this file you can specify your application title, how it should launch, colors and images that can be used for icons and splash screens.

The web manifest icons property is an array of icon objects. The icon object has 3 properties: src, type and sizes. The sizes property is simple syntax for height and width.

{
    "src": "meta/android/android-launchericon-512-512.png",
    "type": "image/png",
    "sizes": "512x512"
}

The browser uses the sizes property to understand the image's size so it can select the best image for the viewport.

My PWAStarter tool will not only generate the manifest file for you it will also create a base set of over 100 images for your PWA.

iOS Splash Screen Meta Tags

When Apple introduced the iOS the original app recommendation was to use HTML5, CSS3 and JavaScript to create rich client-side user experiences. This recommendation did not change until Apple developers cried out and Apple decided to siphon 30% of the revenue generated by native applications.

Of course this was the original progressive web app, just not as sophisticated as we have today. Part of the iOS web app experience is to support the homescreen icon as well as a splash screen, or what Apple calls a Launch Screen Image.

The Launch Screen term comes from their Human Interface Guidelines to direct how native apps should be designed. The idea being when a user launches your web application from the iOS homescreen an initial image is displayed that consumes the entire screen as your PWA initializes.

This is achieved with some META tag magic, which instructs Safari to remove the browser chrome, giving the web application a very native like experience.

But this is Apple and well Apple never does anything to make life easy for a developer…

So you have to add a version for every device and screen resolution you want to support. This means adding a meta tag for each with a different media attribute:

At least they expanded the capability in an easy to implement way by adding CSS media query syntax.

You will need to include them on any page that might be added to the homescreen. Remember when a user adds a web page to the homescreen they are adding that page, not the main URL. So when they open from the homescreen they are always taken to that page, which could be anywhere in your application.

And you will need to consider landscape as well as portrait.

Speaking of sizes, this is a good segway to another important progressive web application splash screen topic, what sizes are splash screens?

Splash Screen Sizes

First, don't freak out, which is where the use of responsive design techniques and the progressive web app web manifest file is be helpful.

If you think about it there are literally thousands of unique mobile and desktop devices your progressive web app might be installed. Not only a mass variety of device viewports, but different operating systems and browsers.

If you look at the Apple Human Design Guidelines for launch screen images that are 16 devices to focus. Of course you will need to double that to cover both portrait and landscape views, or 32 different images.

Device	Portrait Size	Landscape Size
12.9" iPad Pro	2048px × 2732px	2732px × 2048px
11" iPad Pro	1668px × 2388px	2388px × 1668px
10.5" iPad Pro	1668px × 2224px	2224px × 1668px
9.7" iPad	1536px × 2048px	2048px × 1536px
7.9" iPad mini 4	1536px × 2048px	2048px × 1536px
iPhone XS Max	1242px × 2688px	2688px × 1242px
iPhone XS	1125px × 2436px	2436px × 1125px
iPhone XR	828px × 1792px	1792px × 828px
iPhone X	1125px × 2436px	2436px × 1125px
iPhone 8 Plus	1242px × 2208px	2208px × 1242px
iPhone 8	750px × 1334px	1334px × 750px
iPhone 7 Plus	1242px × 2208px	2208px × 1242px
iPhone 7	750px × 1334px	1334px × 750px
iPhone 6s Plus	1242px × 2208px	2208px × 1242px
iPhone 6s	750px × 1334px	1334px × 750px
iPhone SE	640px × 1136px	1136px × 640px

It can be exhausting and intimidating.

So how do you simplify all the required images?

First, the web manifest allows you to inform the browser of what images are available to create your PWA"s launch experience. This means you don't need to worry about creating a set of media queries to define what image could be used the browser engine will determine that for you based on what is available.

Here are some examples from the web manifest file generated by PWA Starter.

[
    {
        "src": "meta/ios/ios-appicon-1024-1024.png",
        "type": "image/png",
        "sizes": "1024x1024"
    },
    {
        "src": "meta/ios/ios-launchimage-750-1334.png",
        "type": "image/png",
        "sizes": "750x1334"
    }
]

PWA Starter will generate over 100 images to be used not only for your homescreen icon, but your splash screens. This automates the process for you by creating the core images you need.

For iOS, it is a little different. You need to use the touch-startup-image Meta tags. Apple says not to focus on providing an image for each viewport, which I agree with.

You can still add multiple META tags to make your code a little more readable.

Again, this is something PWA starter will scaffold for you, so you can more or less copy and paste it into your application HEAD section.

Summary

Hopefully your progressive web application won't need a splash screen experience because it loads fast. However, there are those moments where something is delayed and you will need a splash screen.

The web manifest file provides the easiest way to define the PWA splash screen experience. It works for most devices and browsers today.

But Apple does not yet support the web manifest specification and instead leans on its classic touch-icon mechanism. This works, you just need to be aware you still need to include the META tags to drive that experience.

Even if Apple adds web manifest support in the coming year or so there will still be iOS devices that may not support the feature. This means you will need the META tags for the foreseeable future.

I designed the PWAStarter tool to help scaffold all icons for PWAs as well as the manifest file and the HTML META tags you need for splash screens.