How to Create a PWA in React JS?

We’ve previously discussed the benefits of the React JavaScript framework and seen some fantastic PWA React examples. And here we come to the meat of the issue, the most fascinating and useful portion of our piece. The part that follows is a PWA development tutorial that will show you how to create a React progressive web application.

If you want to improve the engagement and speed of your current online application, you may be wondering how to establish a PWA from an existing React project. In this situation, you should begin with Step 2 of our article on how to develop a progressive web app using React. You can also read this document to learn more about converting an existing app to PWA.

Step 1: Create a basic React app

We will use the previously described tool – Create React App (or CRA). It is a really useful environment for individuals who do not yet understand how to construct PWAs using React. It enables you to leverage the most recent JavaScript features, as well as built-in Babel and webpack. As a result, you don’t have to worry about the bundling and transpiring that are necessary for your program to be distributed to browsers.

You can install and bootstrap your application with CRA by running the following commands on your terminal:

npx create-react-app cra-pwa –template cra-template-pwa

npx is a command-line utility for executing npm packages. create-react-app is a command. create-react-app cra-PWA. After a few seconds, a bare-bones React app is created in the cra-pwa directory. Because CRA 4 and later do not have built-in service workers, the argument —template cra-template-pwa is used to construct an app with a service worker.

This directory may be reached using the following command:

~

cd cra-pwa

The first folder structure will be like the following:

react

The basic folder structure will be as follows:


~
npm start

Step 2: Become a Service Worker

So, CRA gives you all of the tools you need to answer the issue of how to develop a PWA using React. But how can you make a React progressive web application operate offline? You must set up and register the auto-generated service worker file.

The file index.js may be found in the directory of your newly formed project. Open it up and look for the following code:

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

As you can see, the serviceWorker has not yet been registered. To register(), you must update the unregister() call .

So the problem of creating a PWA with a service worker using React is solved. Let’s go on to the next one, which is about web app manifests. ​

 

Step 3: Change the Web Application Manifest

The next step is to configure the web app manifest for your progressive web app, which can be found in the manifest.json file in the public directory. You must change the information that is responsible for the look of your application here.

When finished, your manifest file should look something like this:

{
“short_name”: “cra-pwa”,
“name”: “cra-pwa”,
“icons”: [
{
“src”: “/android-chrome-192×192.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “/android-chrome-512×512.png”,
“sizes”: “512×512”,
“type”: “image/png”
}
],
“start_url”: “/”,
“theme_color”: “#F4BD42”,
“background_color”: “#2B2929”,
“display”: “standalone”,
“scope”: “/”
}

Let’s have a look at what these primary manifest properties represent.

  • short name: The name of your program as it appears inside the icon on users’ home screens or launchers.
  • name: The name of your app that appears on startup screens and prompts in app stores or browsers. A short name will be shown if the name property is not specified.
  • icons: A collection of icons (or simply one) that appear on users’ home screens, launchers, task switchers, splash screens, and so on.
  • start URL: The URL of the page in your app that people view when they launch it.
  • display: This property is in charge of the browser’s view. The software may conceal the address bar, open a new window, go fullscreen, and so on.Consider the following attributes:
    • fullscreen: This option opens the program without any browser UI, occupying the whole screen of the user.
    • standalone: This option enables the program to operate in a new window, much like a native app. It will also conceal browser UI features such as the address bar.
    • minimal-UI: This option is identical to the previous one, but it includes the very minimum of browser UI, such as back and reloads buttons.
    • browser: Enables the standard browser experience.

 

  • theme color: The color of your app’s toolbar.
  • background color: The color of the splash screen that shows when users click on the app icon on their home screens.

A splash screen is a visual element that shows when you open your app. It is a window that displays the name and logo of your program and utilizes the backdrop color you choose. The splash screen in Chrome is generated depending on the following attributes in your web manifest:

  • name;
  • background_color;
  • icons

In terms of icons, Chrome will choose the icon that best suits the device’s resolution. Icons with resolutions of 192px and 512px will suffice in most circumstances. However, if you want to have your logo work on as many different devices as possible, you may include extra icons.

Finally, to make your web manifest file operate, add it to the pages of your web app, as seen below:

<link rel=”manifest” href=”/manifest.json”>

Check the Manifest panel under the Application menu in Chrome DevTools to see whether the settings are correct. See the image below:

chrom

So we talked about how to create a progressive web app using React. Check out the World Wide Web Consortium’s Web App Manifest page for additional information on updating your PWA. More information on customizing the app’s design and functionality may be found there. Furthermore, further information on how to develop a PWA using React can be found there.

Step 4: Put your PWA to the test

We now understand how to create a React progressive web application. Next, test your app.

When you need to launch your software in production mode, use the commands:


~
npm run build
~
npx server build

You have now developed your application and may test it. Lighthouse may assess your web app using Google’s PWA checklist. It is a tool found in Chrome DevTools’ namely tab.

Learn how to test your application’s speed, accessibility, and PWA compliance.

Step 1: Launch Chrome DevTools by selecting ‘Investigate’ from the right-click menu on the page you want to inspect. You may also use the keyboard commands Command + Option + C (for macOS) or Control + Shift + C (for Windows) (for Windows, Linux, Chrome OS).

Step 2: Navigate to the Lighthouse tab and press the ‘Generate report’ button. When you produce a Lighthouse report, make sure the ‘Progressive Web App’ option is ticked.

After the auditing process is completed, you will be given your score as well as a list of factors that influence your app’s performance in various circumstances. These tips will provide you with further information on how to develop a React-based PWA.

Do you want to improve the user experience of your progressive web app even more? Then read this instructive post to learn about the most effective PWA design recommendations.

pwa

 

Read Also: 5 Arguments for Attending a Vue Conference in 2022

Are you looking for an Android Mobile App Developer?