Progressive Web Apps (PWAs) have gained significant popularity in recent years as a way to deliver a native-like experience to users across different devices. React, a popular JavaScript library for building user interfaces can be leveraged to create robust and feature-rich PWAs. In this blog post, we will explore the advantages and disadvantages of building a Progressive Web App with React and provide a code example to help you get started.

Step 1: Setting up a Project:

To create a new project, we will use Create React App, a popular tool for setting up React applications. To create a PWA using Create React App, run the npx command below in the terminal:

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

The above command will create a React web app built with support for PWA out of the box. Then you can navigate to the directory by running the following command

cd pwa-app

Step 2: Add a Simple Counter Component

Now Just create a component folder inside the src directory, then inside the components folder just create Counter.jsx and counter.module.css file, and your folder structure will look like this.

Now you’ll see the structure of your application, also you’ll see the following files which are very important for Progressive Web App (PWA)

service-worker.js: This file is a JavaScript script that operates in the background once your React application starts running. The primary purpose of the service worker is to enable offline functionality for your PWA.

manifest.json: The manifest file is a configuration file for PWAs that provides metadata and instructions to the browser on how the application should be installed and displayed to the user. It is written in JSON format and contains information such as the application’s name, icons of different sizes and resolutions, colors to be used for the browser’s UI elements, and the start URL of the application.

serviceWorkerRegistration.js: This file is responsible for registering the service worker in your React application. It handles the process of checking if the browser supports service workers, registering the service worker script (service-worker.js), and managing its lifecycle.

Now you can used the below code, for Counter.jsx file paste this code:

import React, { useState } from 'react';
import './counter.module.css';
function App() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<div className="App">
<h1>Counter App</h1>
<div className="counter">
<button onClick={decrement}>-</button>
<span>{count}</span>
<button onClick={increment}>+</button>
</div>
</div>
);
}
export default App;

And for counter.module.css file paste this code

.App {
text-align: center;
}
.counter {
margin-top: 50px;
display: flex;
align-items: center;
justify-content: center;
}
button {
font-size: 20px;
padding: 10px 20px;
margin: 0 10px;
}
span {
font-size: 24px;
}

Now, if you open the index.jsx file inside the project src folder and you’ll find this code:

// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.unregister();

Just change the above code serviceWorkerRegistration.unregister(); to    serviceWorkerRegistration.register(); like this

// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.register();

Then start the development server by running the following command;

npm start

After starting the development server you’ll view your application like this and now you have the Progressive Web App (PWA) up and running

By changing serviceWorker.unregister to serviceWorker.register, you enabled the full functionality of service workers in your React PWA, including offline capabilities, caching, background sync, and push notifications. 

Step 3: Deploy the Progressive Web App

Now we can deploy the progressive web app and for this purpose, we’ll use the serve package, you can install the serve package by running the following command

npm install serve

After the above command now run the build and serve command

npm run build
serve -s build

Now you’ll see the below local server address, just paste one of the URL in your browser

To confirm this the service worker is configured correctly just open the inspect element and inside application, navigate to the service workers tab and you’ll see like this

After running the application successfully you can test the PWA Features like offline viewing, installation, and lighthouse speed test. For Installation just click the icon from the URL bar I’m using Microsoft edge, for different browsers this icon can be different, just click on this and install it so you can install your app.

For testing you can use the Lighthouse extension to test the performance of a web application, below are the links for downloading the extension and getting info about the lighthouse.

Here are a few advantages and disadvantages of building a progressive app with React:

Advantages of Building a Progressive Web App with React

Cross-platform Compatibility:

React allows you to build PWAs that work seamlessly across different platforms, including desktop, mobile, and tablets. This cross-platform compatibility ensures a consistent user experience regardless of the device used.

Reusability:

React promotes the concept of reusable components, enabling developers to build modular and maintainable code. This reusability helps reduce development time and effort and ensures consistent design and functionality throughout the application.

Performance:

React’s virtual DOM efficiently manages updates and renders only the necessary components, resulting in better performance and improved user experience. PWAs built with React can deliver fast load times, smooth animations, and responsive interactions, enhancing overall performance.

Offline Capability:

PWAs built with React can leverage service workers, a powerful browser feature that enables offline functionality. By caching essential assets, such as HTML, CSS, and JavaScript, users can access the app even when they have limited or no internet connectivity.

App-like Experience:

React’s ability to create dynamic and interactive user interfaces, combined with PWAs’ features like push notifications and full-screen mode, allows developers to create an app-like experience for users. This immersive experience enhances user engagement and retention.

Disadvantages of Building a Progressive Web App with React:

Limited Device Capabilities:

While PWAs offer broad device compatibility, there might be limitations in accessing certain native device features, such as Bluetooth, NFC, or advanced camera functionality. Native apps still hold an advantage in terms of accessing and utilizing specific hardware capabilities.

Limited App Store Exposure:

Unlike native apps, PWAs do not have direct exposure in popular app stores like Apple App Store or Google Play Store. Users need to discover PWAs through other means like search engines or direct URLs. This may result in lower visibility and discoverability for your application.

Conclusion

Building Progressive Web Apps with React offers numerous advantages, including cross-platform compatibility, reusability, performance optimization, offline capability, and an app-like experience. However, it’s important to consider the limited device capabilities, app store exposure, and browser support as potential disadvantages. By carefully weighing these factors and leveraging React’s capabilities, you can create powerful PWAs that provide an exceptional user experience across various devices.