Adding Custom iOS Splash Screens To Your Progressive Web App
To make your Progressive Web App even more native-like on iOS devices, you may add a custom splash screen that is displayed when users launch your app. This is a feature that has been documented in Apple’s Safari Web Content Guide for a long time, but that has turned out to be more challenging to implement than they have made it seem. In fact, it appears to not have worked at all until iOS 11.0.
To add a custom launch screen, the documentation proposes the following code.
<link rel="apple-touch-startup-image" href="/launch.png">What is not mentioned is that the href attribute has to refer to an image that is of the exact same resolution as the iOS device that uses the app. The problem that arises here is that there are multiple iOS devices with different resolutions, and unfortunately we cannot just simply repeat this code multiple times for images of different sizes. Instead, we need to use the media attribute to specify which launch image is intended for which device.
Add the following code to the head section of your PWA to support custom splash screens for the different iOS devices.
<!-- iPhone Xs Max (1242px x 2688px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2688.png"> <!-- iPhone Xr (828px x 1792px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-828x1792.png"> <!-- iPhone X, Xs (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png"> <!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png"> <!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png"> <!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png"> <!-- iPad Pro 11” (1668px x 2388px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2388.png"> <!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png"> <!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">
Do not forget that in order to have a custom launch screen, your app needs to be mobile web app capable, which can be accomplished with the following meta tag.
<meta name="apple-mobile-web-app-capable" content="yes">If you need help setting up splash screens for your PWA, check out the Splash Screen Generator at Appscope.
For more suggestions on how to make your PWA more native-like on iOS:
Appscope is the leading directory for progressive web apps and offers a collection of the best web-based applications that are compatible with all devices.
