The Ultimate Guide to Converting React Apps to Progressive Web Apps

Do you want to take your React app to the next level and offer your users an app-like experience without the struggle of downloading a native app? Then Progressive Web Apps (PWAs) are the answer! PWAs offer offline functionality, push notifications and more, making them a game-changer in web development. In this article, I'll walk you through the steps on converting your React app to a PWA, allowing you to deliver an immersive, app-like experience to your users.

Introduction

To get familiar with the terms I will be referring to:

• Progressive Web Apps (PWAs) are a new development trend that offers users an app-like experience on their mobile devices without installing a native app. PWAs are essentially websites that run on the mobile browser and can be stored on a device. They create an icon that looks and feels like a mobile application when opened. See Documentation

• Service workers are like special helpers that sit between your browser and the server. They can help your website work better by allowing it to be accessed even if you don't have an internet connection. They can also make your website faster by caching (storing) certain data so that it doesn't have to be reloaded every time you visit the website. See Documentation

• Web App Manifest is a JSON file that describes your app and provides metadata about it, such as its name, icons, and start URL. The manifest is used by the browser to add your app to the home screen and to provide a more app-like experience. See Documentation

Having covered the key terms and concepts, we can now dive straight into the steps required to convert your React app to a Progressive Web App.

Step 1: Create a new React app

To begin you must create a new React project with cra-template-pwa template, which includes the necessary configurations and files for building a progressive web app. Enter the following command into your terminal.

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

Step 2: Enable service worker functionality

Upon creating a new React app, the service worker files are automatically included. To enable the app to function as a PWA, you need to modify the default service worker registration from 'unregister()' to 'register()' in your index.js file. This change ensures that the service worker is registered as a persistent background process, allowing your app to behave like a PWA even after users close their browser or turn off their device. It should look like this

Step 3: Enable your Web app manifest

To customize the appearance of your PWA, you can edit the manifest.json file located in the public directory of your React app. For example, if you want to change the name of your app, you can modify the name property in this file. I will be changing the name of my PWA using this approach.

Step 4: Editing App.js to Customize Your React PWA

You can add any content you want to your App.js file. Here is an example of what my App.js file looks like:

Step 5: Build the App

The next step is to build the app. This will create a production-ready version of your app in the build directory. To build the app, run the following command in the terminal:

npm run build
//or
yarn build

Step 6: Serve the App

The final step is to serve the production-ready version of your app located in the build directory. This will create a local server and serve your PWA directly from the build folder. First run the following command to install 'serve' package globally.

npm install -g serve
//or
yarn global add serve

Then run this command to start a server at http://localhost:5000 (or another available port) and serve your PWA from the build directory

npx serve -s build

When you run your app in your browser it should look like this

You can also add a prompt for ios using the 'react-ios-pwa-prompt' library by running the following command:

npm i react-ios-pwa-prompt

Then, in your index.js file, you should import the PWAPrompt component from the 'react-ios-pwa-prompt' library using the following code:

import PWAPrompt from 'react-ios-pwa-prompt';

Next, wrap your app using the PWAPrompt component and the React.StrictMode component as shown below:

<React.StrictMode>
  <App />
  <PWAPrompt
    promptOnVisit={1}
    timesToShow={3}
    copyClosePrompt="Close"
    permanentlyHideOnDismiss={false}
  />
</React.StrictMode>

The promptOnVisit prop determines when the prompt will be displayed, with a value of 1 indicating that it will be displayed on the first visit. The timesToShow prop determines how many times the prompt will be shown. The copyClosePrompt prop sets the text for the close button, and the permanentlyHideOnDismiss prop determines whether the prompt will be permanently hidden if dismissed.

Conclusion

Congratulations! In this article we walked through the process of converting a React app to a Progressive Web App. We started by understanding the key features and requirements of a PWA, including a service worker and a manifest file and how to implement them. Additionally, we explored advanced PWA features, such as push notifications and home screen icons and title and learned how to incorporate them into a React app. Happy coding!

Comments

[michTheBrandofficial]

Ah, this is so great. I recently finished building a PWA with vite and NixixJS. That technology is so powerful. Nice post, Beatrice 😀

[Vivek Kumar]

that service worker file is no longer there in cra template. Can you provide a different approach now?

[Md Irshad]

Great article. But I have a question why to use a library for iOS prompt for PWA.

[Beatrice Egumandi]

Most safari browsers don’t have the icon where you can install your PWA app, so that library is to prompt the user to follow the instructions to find the icon