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: