Building a Progressive Web App with React

What if you’re scrolling through a website on your phone and the connection suddenly drops? It can be pretty annoying. But what if instead of a blank page, the site still works and shows pages you’ve already visited? That’s the work of a Progressive Web App (PWA). In a way, it gives users the feel of a mobile app, combined with the reach of a website.

When you use ReactJS—a JavaScript library known for creating seamless user interfaces—you can build a PWA that loads fast, works offline, and offers an exceptional experience across devices. But how? This blog will walk you through everything you need to know about building a React progressive web app from scratch.

But, why should you care about building a React JS progressive web app? And how will it benefit your brand? Let’s understand more about PWA design to get clarity.

What are Progressive Web Apps?

In today’s fast-moving digital world, users expect quick, seamless, and engaging experiences. Progressive Web Apps are a brilliant solution that combine the best of both web and mobile applications to deliver a smooth user experience (UX) with impressive performance. 

• What makes them stand out is that PWAs can deliver a smooth UX even in poor network conditions. 
• PWAs are web applications that can work offline, load quickly, and feel like native mobile apps. Plus, they are accessible through a browser. 
• As mentioned, PWAs offer real benefits: faster load times, better user engagement, and no need for users to download an app from the store. 
• Companies such as Starbucks, Pinterest, and Twitter have built PWAs that boosted their engagement and performance.

Codewave’s Web App Development services help you transform ideas into scalable, engaging PWAs. Whether you’re enhancing customer engagement or optimizing business operations, we’ll help you build web apps tailored to your unique needs.

Why You Should Care About React Progressive Web Apps?

If you’re wondering what’s in it for your brand, let’s walk through the benefits of React JS progressive web apps.

1. Faster Load Times: PWAs pre-load critical resources and caching content and ReactJS helps break down user interfaces into smaller chunks, which ultimately makes content load faster. Even on slow networks, your React PWA will perform seamlessly.
2. Offline Functionality: With a ReactJS-based PWA, you can work offline by using service workers. These workers store parts of the app in the browser’s cache, allowing users to browse content even when offline.
3. Native-App Feel: As PWAs combine the best of both mobile and web app worlds, they offer an app-like experience without the need for downloads from app stores. This helps businesses deliver a consistent user experience across platforms.
4. SEO-Friendly: ReactJS PWAs can significantly boost your site’s search engine ranking. Google favors fast, mobile-friendly web apps that provide a smooth experience. 
5. Push Notifications: PWAs, including those built with ReactJS, allow you to send push notifications directly to users—even from the web. These notifications can help you re-engage customers, reminding them about new offers, promotions, or items left in their shopping carts.

Want to learn about the features of Progressive Web Apps on iOS? Check out this blog on its status and limitations.

The best part is it’s easier to build a PWA using React than you might think. Now let’s shift the focus on building React progressive web apps. First, let’s learn how to set up the React PWA project, so you’ll be on your way to building a fast, reliable app.

Setting Up the React PWA Project

Creating a React progressive web app may sound technical, but it’s possible with the right tools and a few clear steps. 

Prerequisite Tools

Before getting started, make sure you have Node.js installed. Node.js allows you to use npm (Node Package Manager), which helps you install all the libraries and dependencies for your project.

Step 1: Download and install Node.js from nodejs.org.

Step 2: Confirm the installation by running these commands in your terminal:

• node -v  
• npm -v

These commands will display the installed versions of Node.js and npm. If both show version numbers, you’re ready to proceed.

Creating a React App with a PWA Template

React makes it simple to get started with a PWA, thanks to the built-in PWA template. This template includes everything you need to set up offline support and caching right from the start.

To create your React PWA, open a terminal or command prompt and enter the following command:

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

• npx: A package runner that comes with npm. It helps you execute packages directly from the npm registry without having to install them globally on your system.
• Create-react-app: This is a command-line tool provided by the React team that helps you quickly set up a new React project with a pre-configured environment.
• my-pwa-app: Replace this with your project name.
• –template cra-template-pwa: This command ensures the app uses the PWA template, which includes service workers and other necessary files.

Once the setup is complete, your React PWA is ready to be customized and improved. You’re one step closer to building a powerful progressive web app.

Folder Structure

When you open your new React project folder, you’ll see several directories and files. We’ll focus on the key files that make your app function like a PWA.

1. public/manifest.json

This file describes how your PWA will appear when installed on a user’s device. It includes essential metadata like the app name, icons, theme color, and background color. 

Here’s an example snippet:

The manifest.json file ensures that your app looks and feels like a native app when added to a device’s home screen.

2. src/service-worker.js

Service workers are the backbone of any PWA. They enable offline support, background syncing, and faster load times by caching resources. This file contains the logic to handle network requests and store responses for future use.

The default service worker provided by the React template is registered but not enabled by default. When activated, it helps your app work even when there’s no internet connection. Here’s an example snippet of service worker logic:

This ensures your users can load the app even when they’re offline, improving the experience and keeping them engaged with your brand.

3. src/serviceWorkerRegistration.js

This file handles the registration of the service worker. It ensures that the service worker is installed properly and works in the background. If there’s an update available, this file can trigger an alert or automatically refresh the app.

Here’s a simple code snippet from this file:

This registration process ensures that your PWA stays functional, reliable, and up-to-date with minimal effort.

Did you know PWAs can pair with frameworks other than React? Check out how in this blog on Top Progressive Web App Frameworks for 2024.

So, we understand that a service worker plays a major role in making your PWA work offline by caching essential resources. Now, let’s see how to create and register the service worker.

Creating and Registering the Service Worker

When you generate your React app using the PWA template (cra-template-pwa), it comes with a service worker configuration file located in the project folder. This file—service-worker.js—handles essential tasks like:

• Caching static assets (JavaScript, CSS, images) so they don’t need to be re-downloaded every time the app is opened.
• Managing offline support so your app continues to function without an internet connection.
• Quickly returning cached files whenever possible, speeding up how fast the app loads

Example Setup:

This is what your service-worker.js might look like:

This basic setup allows the service worker to cache your app’s resources and serve them later when the app is offline. It also ensures your React PWA loads quickly even on slow networks.

Opt-in Instructions

By default, the service worker in the Create React App is disabled. To enable it, you need to register the service worker manually.

Here’s how to do it:

1. Open the src/index.js file in your project.
2. Look for the following lines:

import * as serviceWorkerRegistration from ‘./serviceWorkerRegistration’;

serviceWorkerRegistration.unregister();

3. Change the unregister() method to register() like this:

serviceWorkerRegistration.register();

This step ensures your service worker gets registered and starts working, giving your users offline access and faster load speeds. 

But why register, you may ask? When the service worker is registered, your app can handle push notifications, background syncs, and dynamic caching. This boosts user engagement and improves the overall performance of your PWA.

Once the basic service worker is registered, you may want to enhance its functionality. Workbox, a popular library from Google, offers ready-to-use modules for caching, background sync, and notifications. Let’s understand this with an example.

Example: Adding Workbox for Better Caching

First, install the Workbox package using npm: ‘npm install workbox-build –save-dev’. Then modify your service-worker.js to use Workbox modules like this:

Workbox allows you to handle:

• Pre-caching: It involves storing specific assets in the cache when the service worker is first installed. This means that crucial files, like HTML, CSS, JavaScript, and images, are available right away when a user opens the app.
• Runtime caching: This refers to the dynamic caching of resources while the application is running, particularly for API calls or other requests made during the app’s operation.
• Stale-while-revalidate strategy: It’s a caching approach where the service worker serves the cached content immediately while fetching an updated version in the background.

Example: Adding Push Notifications

Want to engage your users with timely updates? You can use service workers to send push notifications. Here’s a snippet showing how to handle push notifications in your service worker:

This allows your React PWA to notify users about important events even when the app isn’t running.

An important aspect of building a PWA is generating the web app manifest. It serves as a configuration file that provides important information about your app to the browser. This information helps define how your app appears and behaves when users install it on their devices. Let’s break down the essentials in generating a web app manifest.

Generating the Web App Manifest

The manifest file is typically located in the public folder of your React application and is named manifest.json. This JSON file contains metadata that helps browsers understand how to display your app and its features. Now, why is the manifest file important?

The manifest file allows users to add your app to their home screen. When installed, the app can operate like a native application. It can offer offline functionality and better performance. In a way, it ensures that your PWA feels like a regular app.

Essential Properties in a Manifest File

Your manifest.json file should include several key properties that define the essential aspects of your PWA. Here are the most important ones:

1. name: This is the name of your app that users will see. It should be clear and represent what your app does. Example: “name”: “My React PWA”
2. icons: These are the images that will be displayed when your app is installed. You should provide multiple sizes to accommodate different screen resolutions.

3. start_url: This is the URL that the app will open when launched from the home screen. It should point to the main entry point of your application. Example: “start_url”: “/index.html”
4. display: This property controls how your app appears when launched. You can set it to standalone, fullscreen, or minimal-ui to control the browser’s interface elements. Example: “display”: “standalone”

Customization

Beyond the essential properties, you can customize your manifest to reflect your brand identity. Here are a few ways to do that:

• Background Color: Set a background color that matches your brand. This color is used during the app’s launch. Example: “background_color”: “#ffffff”
• Theme Color: This color affects the status bar and browser UI when your app is opened. Choose a color that aligns with your branding. Example: “theme_color”: “#000000”
• Description: Provide a brief description of what your app does. This helps users understand the purpose of your app quickly. Example: “description”: “An amazing React PWA that enhances user experience.”

Here’s an example of a complete manifest.json file:

After writing code for your React PWA, the next step is to see it in action. Testing your React PWA helps you ensure everything works as expected across devices and browsers. Let’s dive into how to test and run the code effectively.

Testing and Running the Application

This section covers key tasks like starting the development server, switching to offline-first behavior, and testing the app locally.

1. Starting the Development Server

As the first step, you’ll need to run the development server. This process compiles your code and starts the React app on a local server. You can use either Yarn or npm, depending on which package manager your project uses. For example: yarn start or npm start.

Once you run the command, the server will start. Open the URL in a browser to see your PWA in action. This is where you’ll begin to see how your app responds in real-time. It makes it easy to catch bugs during development.

Pro tip: Keep the console open in your browser’s developer tools. It’ll help you spot errors or warnings right away, making debugging easier.

2. Registering the Service Worker

One of the standout features of a PWA is offline-first behavior—the ability to function without a network connection. This magic happens with the help of a service worker. As mentioned earlier, in React apps created with Create React App, the service worker is unregistered to avoid unintended behavior during development.

You need to change serviceWorker.unregister() to serviceWorker.register(). This small change ensures your PWA will cache files and work offline after the first load. However, it’s important to note that service workers only run on HTTPS or on localhost (during development).

Pro tip: If your app behaves oddly after a service worker update, clear the browser cache and reload. Service workers can hold on to outdated versions, so a hard refresh helps.

3. Local Testing

Testing your React PWA locally helps you catch performance issues and ensures the offline functionality works as expected.

Basic Browser Testing

Once the app is running, open it in your browser. Interact with the app to ensure everything works smoothly—check navigation, form submissions, and any animations or transitions.

Testing in Incognito Mode

Since incognito mode runs without browser extensions and cached data, it’s a good way to simulate how a new user experiences your PWA. Open your app in an incognito window and verify that all critical features work.

To test the offline mode, try these steps:

1. Install the app to your home screen or browser (if available).
2. Disconnect from the internet.
3. Open the app again and see if it loads the cached content properly.

By testing both in normal and incognito mode, you ensure that your service worker performs as expected and no hidden bugs pop up for new users. 

Codewave’s automation testing services can help you identify bugs, ensure consistent functionality, and optimize performance through end-to-end testing. Whether it’s offline capabilities or background sync, we ensure every feature of your React Progressive Web App works as intended.

But the real magic happens in the final stages: building and deploying the PWA. After writing and testing your code, it’s time to prepare your app for production and host it online. 

Building and Deploying the React Progressive Web App

This step ensures that your PWA is optimized for performance and security before it reaches users.

Creating a Production Build

In the development phase, your app runs on a local server with unoptimized code. However, for deployment, you’ll need a production-ready build. This process bundles all the JavaScript, CSS, and HTML files to make the app faster and reduce its size.

To generate a production build, run the following command in your terminal:

npm run build

This command creates a build folder with optimized files, ready for deployment. You can serve these files locally to ensure the build is working properly using:

npx serve -s build

The command above starts a simple static server, letting you preview your production build. Make sure everything works smoothly before you push it to the web.

Pro tip: Always clear your browser cache when testing the production build. This ensures you’re seeing the latest version without any leftover files from earlier sessions.

Deploying the PWA on a Static Server

Once the production build is ready, the next step is to deploy it on a static hosting service. One of the simplest options is Firebase Hosting. It’s fast, secure, and works perfectly for PWAs. Here is a quick guide to getting your PWA live using Firebase:

Steps to Deploy on Firebase

1. Install Firebase CLI using: npm install -g firebase-tools
2. Log in to Firebase using: firebase login
3. To initialize Firebase hosting run this command inside your project folder: firebase init. Select Hosting when prompted, and choose the build folder as the public directory.
4. Deploy your App using: firebase deploy

After a successful deployment, Firebase will give you a live URL where your PWA is hosted. You can automate future deployments by adding a script to your package.json.

This way, every time you update your app, you just have to run: npm run deploy.

Once your code is written and deployed, the real challenge is ensuring your app runs smoothly and efficiently. Performance and optimization are the key factors that make your React Progressive Web App a delight for users. 

Performance and Optimization for React Progressive Web Apps

Good performance is essential for PWAs. Optimizing your PWA ensures that your users enjoy a smooth experience across all devices, whether they’re online or offline. Here are some strategies to help you build a top-notch React JS Progressive Web App.

1. Asset Caching Strategies

By storing key assets like JavaScript, CSS, and images in the cache, you can serve them instantly the next time a user opens the app. This is known as the cache-first strategy. 

How Cache-First Works:

• When a user visits the app for the first time, the service worker caches important files.
• On subsequent visits, the cached version is served first. If an update is needed, the app fetches it in the background.

Using a cache-first approach offers instant load times, even if the user’s internet connection is weak or unavailable. Here’s an example of a simple caching strategy for your service worker:

This strategy ensures that all core files are available offline, making your PWA dependable and quick.

2. Managing the Service Worker Lifecycle

Managing the service worker’s lifecycle can be tricky. You want to make sure you don’t disrupt the user’s experience by forcing updates at the wrong time.

Conservative Update Approach:

• Don’t auto-update the service worker without user awareness. This prevents confusion when users suddenly see changes or lose unsaved work.
• Instead, inform users when a new version is ready and allow them to refresh the app manually. This ensures that users feel in control of their experience.

Here’s a snippet to notify users when an update is available:

Best Practice: Keep updates small and frequent to avoid breaking the cache. This way, users always have the latest version without a disruptive experience.

3. Tools for Optimization

Building a high-performing PWA involves more than just caching. Tools like Workbox and Lighthouse help you fine-tune your app for optimal performance.

Workbox: Simplifying Service Worker Management

Workbox is a library from Google that makes it easier to manage service workers. It comes with pre-built caching strategies (like cache-first or network-first) and helps you avoid common pitfalls.

To install and set up Workbox:

This command creates a ready-to-use service worker with smart caching rules, reducing the chances of errors. Workbox automates many complex tasks which saves you time and effort while keeping your app fast.

Lighthouse: Auditing Performance for Improvements

Lighthouse is an open-source tool for analyzing and improving the performance of web apps. It provides actionable insights into areas like speed, accessibility, and SEO.

To run a Lighthouse audit, open Chrome DevTools and go to the Lighthouse tab. With a single click, you’ll get a detailed report showing your PWA’s performance score and recommendations for improvement.

Some key areas to focus on:

• Reduce JavaScript bundle size for faster loading.
• Optimize images and use modern formats like WebP.
• Minimize render-blocking resources like unused CSS.

Regular Lighthouse audits ensure that your React Progressive Web App stays ahead of the curve in terms of performance and user experience.

With Codewave’s Performance Audit, you can optimize load times, boost responsiveness, and ensure seamless user experiences. Our experts dive deep into identifying bottlenecks, enhancing speed, and maintaining service excellence to get your PWA running smoother, faster, and more effectively.

Check out this blog on Successful Examples of Progressive Web Apps that can help you learn more about PWAs using real-world applications.

As you might have understood by now–building a React Progressive Web App is about more than just good design and code–it’s about making sure your users stay connected, even when their network doesn’t. To transform your PWA into a reliable, engaging tool for your audience, there are some advanced features you should be aware of.

Advanced Features for Your React Progressive Web App

Let’s dive into advanced PWA features that take your React Progressive Web App to the next level. 

1. Offline Functionality

In React, you can implement offline capabilities with ease using Workbox. Below is a quick snippet that caches assets and serves them offline:

2. Push Notifications

To integrate push notifications, many developers rely on Firebase Cloud Messaging (FCM). It’s a simple, reliable way to deliver messages to users. Here’s an example setup in React:

3. Background Operations

A great React Progressive Web App should function seamlessly in the background, whether it’s syncing data or fetching updates. 

Background Sync

Background sync ensures that actions (like sending a message or saving data) are completed even if the user loses internet connection temporarily. For instance, if a user submits a form while offline, the app will sync the data with the server once the connection is restored.

Here’s how to set up background sync in your service worker:

With background updates, you can silently push new content or bug fixes without disrupting the user’s experience. Using service workers, you can download updates in the background and apply them the next time the app is opened.

Conclusion

Building a React Progressive Web App gives you a chance to deliver an app-like experience right through the browser. They combine the best of websites and mobile apps, offering faster load times, offline access, and seamless user experiences that keep customers coming back.

PWAs are no longer just a trend—they’re becoming the new standard for web development. As users expect seamless, fast, and offline-friendly experiences, businesses must adapt to stay competitive. 

Whether you’re looking to boost engagement, improve performance, or cut development costs, PWAs are a smart solution. At Codewave, we specialize in design-led digital innovation to help businesses unlock the full potential of PWAs. 

Our team brings expertise in ReactJS development, ensuring your PWA isn’t just functional—it’s also beautiful, engaging, and aligned with your goals. Ready to create a PWA that drives growth for your business? Let’s turn your idea into reality.