Customize the Splash Screen of a PWA built with create-react-app
Android displays a splash screen for PWAs based on the icons and names you provide, but iOS just displays a solid color splash screen for installed PWAs by default.
We'll make a new splash screen image for every iOS device resolution size that we want to support, and then we can make a link tag in index.html to specify those images as the splash screen for each device resolution.
Also, make sure to remove background_color from the manifest - or it may overwrite the splash screen images on iOS.
Instructor: [00:00] We've already specified an icon that is at least 512 by 512 pixels. We specified the background color and the manifest, so the splash screen on Android will use those values, and that already looks pretty good.
[00:17] The splash screen on iOS is just a plain white screen. To add a custom image as the splash screen, first we have to create an image for every screen resolution size for each iOS device that we want to support.
[00:32] You can see the resolution of each image here, and Apple's documentation also has the same information. Unfortunately, there's no way around this tedious step. Let's copy all those images into the public folder of our app and then open index.html.
[00:49] First, we must tell iOS that the app is mobile-web-app-capable with a MEDITECH. Then we can specify each of those launch images as the image for that resolution. As a tedious step as well, but you'll see now that we have each iOS device resolution size covered by a link tag.
[01:09] Finally, in manifest.json, we have to actually remove the background color setting first. Otherwise, that will override all of our images. Now, we can finally build and serve that. Notice I'm using a new port, so iOS will recognize this is a new app for my testing.
[01:28] On iOS, we can install the app and launch it from the home screen. There's our new splash screen.