How to create a splash screen in PWA

PWA stands for Progressive Web Application, which operates on web and mobile devices. It combines the best features of websites and mobile applications like offline accessibility, fast loading times, responsive designs, etc. Check out this amazing course if you want a deep dive into PWAs.

PWAs and other web applications normally take some time to load and initialize their setup. Encountering a blank screen while waiting for an application to load can result in a lackluster user experience. It’s common for users to feel disengaged or even concerned about potential technical issues if an application’s loading process is prolonged. That’s why developers implement splash screen in their applications.

What is a splash screen?

The splash screen is an image or graphical element that appears on the screen when the software application, mobile application, or game is being launched and provides visual feedback that the app is launching or loading till the app becomes fully functional. It serves functional and branding purposes as well as enhances user experience.

Run the code below to see how a splash screen appears in our image gallery project.

{
  "name": "splash-screen-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Splash screen in PWA

Explanation

To implement a splash screen in PWA created by react, we’ve to follow these steps:

Create a SplashScreen.js file inside src directory as a component.
- Inside this component, in line 8, we placed an image that acts as logo on the splash screen.
- A heading is also added in line 9, using <h1> tag displaying “Loading...” text.
Create a SplashScreen.css file for adding styles to our splash screen.
Now, the main step is adding this component to our main App.js component. For this, we have to follow the following steps:
- Line 2: Firstly, we have imported our SplashScreen component inside App.js.
- Line 6: After that, we have used the useState hook and provided true as initial value to the loading variable.
- Line 8: Next useEffect is being used to simulate a loading time delay.
  - This effect has an empty dependency array, meaning it only runs once after the initial render.
  - Inside this effect, setTimeout function sets the loading variable false after a time period of 2 seconds.
- Line 17: Inside the return statement, the ternary conditional operator checks for the loading variable’s value and renders the main page or the splash screen accordingly.

To wrap this up, adding a splash screen to a PWA is a good idea to enhance user experience and engagement. Also, it’s helpful for branding purposes. Not only does it provide a seamless introduction to the app, but it also reflects professional development behavior.

Free Resources

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments