Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Customize the Splash Screen of a PWA built with create-react-app

    Chris AchardChris Achard
    reactReact
    16.6.3-16.8.6
    javascriptJavaScript
    androidAndroid
    iosiOS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    On iOS, we can install the app and launch it from the home screen. There's our new splash screen.