The global market size for Progressive Web Apps is expected to grow from $1.46 billion in 2023 to $9.43 billion by 2030 with a CAGR of 31.1% (according to GrandViewResearch’s report). Meanwhile, many companies, including successful tech giants like Spotify, BMW, and Instagram have adopted PWAs to deliver faster, more engaging mobile experiences, many using React under the hood.
This guide breaks down what PWAs are and why they matter to businesses. You'll learn how major brands improved their user experience (UX) and reduced overhead by switching to React Progressive Web Apps.
We'll also explore what makes React’s reusable code, lazy loading, and other features. But the programming library alone doesn’t guarantee success. That’s why our guide will walk you through the technical foundations and strategies needed to build a PWA in React. Speaking of the foundations…
What is a PWA?
A Progressive Web Application (PWA) is a web app accessible via an internet browser with the elements of a native mobile application.
Let’s dig deeper. Traditional websites reload entire pages when the user interacts with most on-page elements. Meanwhile, native apps require installation on your device, and much of their content is stored locally. Progressive Web Apps bridge the gap between the twoбcombining the flexibility of the web with the functionality and responsiveness of mobile applications.
Think of a PWA as a website with a mobile app's look, feel, and behavior. Popular examples of PWAs are YouTube, Google Docs, and Facebook websites.
The shift toward web-native applications in modern product development
The development of PWAs spans over a decade, starting with the introduction of the first iPhone in 2007. Back then, Steve Jobs advocated for building web apps via HTML, CSS, and JavaScript to make them accessible through the Safari browser.
Of course, smartphones at the time had limited performance for anything advanced. As the technologies progressed, so did the web apps.
The shift happened in 2015 when Google Chrome engineer Alex Russell and designer Frances Berriman coined "Progressive Web Apps." They envisioned them as web applications that could deliver native-like experiences using modern web capabilities.
Core principles of Progressive Web Apps
Users expect quick, seamless, and engaging experiences on websites. To meet these demands, PWAs are built on the following principles:
Adaptability: Built for modern and older browsers that provide offline support, background data sync, and push notifications.
Responsiveness: This app type adapts to any screen size, platform, and orientation. Content and UI components can resize and stack appropriately.
Offline-first: Service workers cache static files (HTML, JS, CSS) and API responses, allowing users to interact without an internet connection.
Installability: PWAs can be added to a device’s home screen via a browser prompt.
Linkability: Unlike native apps that require a download, PWAs are just URLs users can share.
Security: When served over HyperText Transfer Protocol Secure (HTTPS), the data exchanged between servers and the user device remains encrypted and secure.
Re-engageability: App-style navigation and features like push notifications and alerts are designed to maintain engagement.
Freshness: The web-based app downloads core updates on the first visit. While the user browses, updates load in the background.
SEO: Being websites under the hood, PWAs are crawled and indexed by search engines.
Combined with a development team that knows what it’s doing, these principles translate into advantages.
Business impact of PWAs
Companies invest in PWAs and modernize their older apps because they provide measurable improvements and value.
Enhanced user engagement
Improved user experience led companies like Forbes Media LLC, Tinder LLC, and Twitter (now X) to adopt PWAs. Unlike native mobile apps, PWAs don’t require users to install or configure anything. And, if the internet fails, the users can still browse or interact with some elements.
PWAs are much more immersive than regular sites or web apps. Animations, modular UI blocks, and fluid transitions keep the users more absorbed. Meanwhile, contextual messages (like price drop alerts on saved items) encourage re-engagement.
Boost in product performance
Thanks to service workers – background scripts that manage caching and offline functionality – PWAs deliver near-instant load times on repeat visits. Static assets, API responses, and UI components are stored locally, allowing the app to stay responsive even with weak or unstable connections.
For example, Twitter Lite cut page load time by over 30% and reduced data usage by 70% after adopting a PWA architecture.
This kind of performance boost directly translates into better engagement and higher revenue. Faster-loading PWAs lead to lower bounce rates, higher conversion, and smoother mobile experiences, especially in regions with slower networks.
Reduced development costs and time to market
PWA development is more affordable than native app development. The reduced maintenance and design costs are why small and medium companies are expected to adopt these apps the most.
A native mobile app must be built separately for Android and iOS, each requiring different programming frameworks, SDKs, and distribution systems. On the contrary, PWAs are built with a single-code-based approach. It will run on modern devices with a browser while the updates are delivered to the servers without store approvals.
Broadened accessibility and reach
The global PWA market is also driven by smartphone and internet penetration. These apps work on nearly any device with a browser because they’re lightweight and don’t require intensive resources. With React, an advanced app may load most features in less than 1 MB.
Users only need a URL to use the PWA. This means they can run on locked-down corporate devices or school tablets. As we mentioned, PWAs are indexed by search engines, so you can make them more discoverable by adjusting the metadata and on-page content.
And if distribution through app stores is important, PWAs can be submitted to Google Play without issue. Apple’s App Store is more restrictive, but industry pressure and rising PWA adoption are slowly pushing iOS to open up as well.
React, being an open-source JavaScript library, fits well into the PWA model.
Advantages of React-based PWAs
If you're building with React, progressive web app features have greater flexibility and control. To understand exactly what we mean, let's examine how this library amplifies the advantages of PWAs.
Standalone app-like experience
PWAs built on React feel like native apps and have similar capabilities due to the service workers (background scripts) that preload and cache resources and the Web App Manifest (manifest.json) configuration file that describes your app to the browser (how it should launch, screen orientation, app name and icon, and more).
These web standards aren’t exclusive to React, but they work smoothly with React’s tools, such as create-react-app (with the cra-template-pwa option) and custom service workers. Additionally, React’s declarative model and integration with browser APIs work great for PWAs’ native-like features, such as:
Camera and microphone (activated via the getUserMedia).
Geolocation (works through navigator.geolocation).
Push notifications (pushed via APIs and service workers).
Persistent storage (IndexedDB is easier to use with React’s libraries like idb, localforage, and use-async-storage).
An app for a blog can store a reading position and the last visited category. Users can continue exactly where they left off after returning to the web page.
Minimal download size and smart loading
React splits the application code into smaller “chunks” (code splitting) to reduce the time needed for users to interact with the page. Only the necessary parts are loaded first, while the rest are fetched when needed.
The React technologies that allow smart loading include:
React.lazy() — loads components only when they’re rendered for the first time.
import() — dynamically fetches modules (e.g., charts, settings pages) based on user navigation.
Tree shaking — removes unused code during the build process.
Route-level chunking (when combined with tools like React Router or frameworks like Next.js) — made possible by combining React.lazy() with React Router or frameworks like Next.js, so users download only the code required for the current view.
Consider an e-commerce app built with React. The homepage might load product thumbnails and category tiles. However, the product details don’t load until a user taps or hovers over the product.
Reduced maintenance overhead
PWAs are easier to maintain, update, and scale because of React’s modularity. It allows developers to break the UI into isolated, reusable components. As a result, different components are easier to test, and refactoring has minimal chances of breaking other features.
React promotes a declarative programming style (you describe what you want the UI to do, not how to do it), making the code easier to read, reason about, and debug. In addition, useEffect() and related hooks make it easier to control side-effect management (like fetching data, subscribing to updates, or accessing browser APIs).
With tools such as styled-components or emotion, your coding styles live inside the components. This helps you scope CSS locally so your styles won’t accidentally clash.
How to create a PWA with React: Technical foundation and implementation
Many PWA projects fail because teams rush to implement features without properly structuring them. This section covers the React PWA framework, including the planning, preparation, and technical considerations.
Feature planning and developer collaboration
Before writing code, companies must define why they want to build a PWA, what features they want, and how they plan to develop it using React.
Align product development goals
This so-called research and planning phase should also help you determine core features for the app.
Determine functionally what adds the most value. For example, prioritize offline accessibility if your audience frequently accesses your service in low-connectivity environments. If re-engagement is a key KPI, implement push notifications.
Involve different stakeholders. End-users can be surveyed, interviewed, or invited to participate in beta versions. You should also get input from your marketing and customer support teams that deal with user pain directly.
Build actionable user stories. Convert your findings into clear use cases that will be used to design the UI, create background logic behind the app, define acceptance criteria, and build testing scenarios.
Implement resilient PWA-specific features
After mapping out the features for the PWA project, you should decide how to design to keep the app usable and non-intrusive.
To handle offline data correctly, Reach should work properly with Workbox to cache static assets, IndexedDB to store dynamic content, and Fallback tools that keep the interface usable if the app encounters an error.
Push notifications should not be intrusive. Pop-ups and alerts require explicit permission and can easily feel spammy. The solution is to ask for permission only after meaningful engagement, not right after the user opens your site. Additionally, show fallback options if the feature is not supported on the user’s device.
Queue the requests for later. Use the Background Sync API to store user actions (such as a notification about a price drop) when they’re offline. If your app just fails to deliver and doesn’t retry, you can lose a potential conversion.
Establish a collaborative workflow
React-based PWAs are complex projects that involve browser APIs, UX patterns, and business logic. That's why the development requires coordinated efforts with clearly defined responsibilities for developers, designers, testers, QA teams, and product managers.
Use an Agile-based workflow with clearly defined sprints, code reviews, and testing gates to control how new features are released
Shipping features in increments is essential for quality control. You can push working subsets to production and test them under real-life scenarios. Use custom feature flags and A/B testing to expose PWA features and measure engagement rates with users.
Consistent cross-platform design
PWA must function and feel native across mobile platforms, tablets, and desktop services. In other words, your app should respond well to different device contexts and meet accessibility standards.
Responsive and adaptive design
React doesn’t prescribe layout behavior, but you can integrate CSS frameworks or JavaScript logic to control presentation.
Tailwind CSS: Utility-first classes like sm:px-2, lg:grid-cols-4 give granular control over spacing and layout without leaving your JSX.
SS-in-JS (styled-components or Emotion): Lets you define styles alongside your component logic to simplify breakpoint management and media queries.
Accessibility
The app should comply with Web Content Accessibility Guidelines (WCAG) to make it usable for people with disabilities. Some of the practices to follow include:
Use semantic HTML: <nav>, <main>, <section>, <button> instead of divs with role attributes.
Implement ARIA attributes when necessary: aria-live, aria-label, aria-expanded, especially for dynamic UI components.
Ensure all interactive elements are keyboard accessible and test them using the Tab key.
Maintain a minimum color contrast ratio of 4.5:1 for text.
Use libraries like react-axe (for audits in development) and @react-aria (for accessible components).
PWA-specific design patterns
PWAs have their own UX rules and user expectations that you should account for when designing an app.
Use persistent elements. Hamburger menus, slide-outs, or tab navigations should work even if the user is offline. Avoid navigation resets when offline (state-based router fallback can prevent 404 errors).
Implement user feedback elements. Use skeleton screens or animated placeholders while content loads or caches. React has error boundaries that catch render errors and display fallback UI messages (banners, badges, or status indicators that inform users).
Use optimistic UI updates with rollback logic. For example, the app should indicate when the user is offline or when changes are not syncing.
Home screen integration. Installed PWAs should have an appropriate splash screen, icons, and loading animations. Notably, PWAs can go full-screen on Android and simulate native styling on iOS.
Update UI state continuously. To avoid crashing the app, disable or defer actions that require an active connection. The navigator.onLine and window.addEventListener('online'/'offline') can help detect connection changes in real-time.
Setting up React PWA
Take time to configure the web app to behave like a native app, which involves several steps.
1. Install prerequisites
You need Node.js and Node Package Manager (npm) to manage builds. Node.js is a runtime that lets you run JavaScript outside the browser. Meanwhile, npm handles the dependencies.
To install, download the Long-Term Support (LTS) from nodejs.org. Then, confirm installation via the terminal:
node -v
npm -vYou can use nvm or fnm if you manage multiple Node versions across different projects.
Afterward, use one of the options to create a React app (PWA).
2. Option A: Create with a React app PWA template
Create React App (CRA) is a fast way to bootstrap a React project that handles Webpack configuration, service worker generation, and other tooling.
To create a PWA-ready React project, run the following command:
npx create-react-app my-pwa-app --template cra-template-pwaOnce generated, go to the src/index.js file and enable the service worker. To do this, change the settings serviceWorkerRegistration.unregister(); to serviceWorkerRegistration.register();
3. Option B: Next.js with the plugin
Unlike Create React App (CRA), which only supports client-side rendering, Next.js offers hybrid rendering, combining server-side and client-side techniques. This lets you pre-render pages for better SEO and load speed while keeping interactive parts on the client.
Starting from Next.js 13+, you can enable Progressive Web App functionality without third-party plugins. The official approach uses the next/worker API and manual service worker setup.
Steps to enable PWA in a Next.js project (official method):
Generate a new app
npx create-next-app@latest my-pwa
cd my-pwaAdd a service-worker.ts file in the project root (or public/), and register it from the client (e.g., in layout.tsx or page.tsx).
Place PWA-related files in the /public folder:
manifest.webmanifest
Icons (e.g., icon-192x192.png, icon-512x512.png)
Handle the install prompt in your app:
Instead of manually registering the service worker, use the official install prompt approach. Here’s a recommended implementation:
'use client';
import { useEffect, useState } from 'react';
export function InstallPrompt() {
const [deferredPrompt, setDeferredPrompt] = useState<Event | null>(null);
const [showPrompt, setShowPrompt] = useState(false);
useEffect(() => {
const handler = (e: Event) => {
e.preventDefault();
setDeferredPrompt(e);
setShowPrompt(true);
};
window.addEventListener('beforeinstallprompt', handler);
return () => { window.removeEventListener('beforeinstallprompt', handler);
};
}, []);
const installApp = async () => {
if (!deferredPrompt) return;
// @ts-ignore
deferredPrompt.prompt();
// @ts-ignore
await deferredPrompt.userChoice;
setDeferredPrompt(null);
setShowPrompt(false);
};
if (!showPrompt) return null;
return (
<button onClick={installApp}>
Install App
</button>
);
}You can place <InstallPrompt /> into a layout or page component. No need to include <PushNotificationManager /> since it’s optional and not part of PWA installation.
For more details, check the official Next.js PWA guide.
4. Configure the Web App manifest
The Web App Manifest is a JSON file that defines how your PWA appears and behaves when installed on a device. Both CRA and Next.js have this file inside the public/ folder with the key fields being:
name: Full app name shown on splash screens
short_name: Label under the home screen icon
start_url: Where the app launches when opened
display: Set to standalone for a native-app feel (removes browser chrome)
theme_color: Changes the browser UI theme to match your app
icons: Required for installation on Android; multiple sizes recommended
Tools and libraries
Modern Progressive Web Apps (PWAs) rely on a set of JavaScript libraries and browser APIs. The following tech stack can help simplify some development steps.
Workbox: A JavaScript library developed by Google to simplify the management of service workers in PWAs. CRA includes Workbox by default via cra-template-pwa. In Next.js, you integrate Workbox using the next-pwa plugin.
React Router: A routing library that controls URL-based rendering and navigation for single-page applications (SPAs). You can combine React Router with Workbox to pre-cache or lazy-load routes on demand.
Lighthouse: An auditing tool from Google built into Chrome DevTools that helps check if the app follows PWA standards (installability, offline readiness, performance, accessibility, and other practices).
Offline caching strategies
PWAs must cache and store data for different content, primarily static and dynamic assets. Several caching strategies can make the content delivery feel seamless:
Cache-first: Serve cache for images, logos, icons, fonts, CSS, and JSS files that rarely change.
Network-first: Serve from the server for news feeds, product lists, and dashboards to keep content fresh (and fall back to cache if offline).
Stale-while-revalidate: Serve cached content immediately and fetch updates in the background for data that should load quickly but stay up-to-date (dashboards and notifications).
Use different strategies for different content types. For example, user-created data, especially filled forms or reviews, ideally should be stored locally if they go offline.
IndexedDB with Background Sync helps user-generated data, like the forms, persist on the device. Additionally, tools like react-query or SWR can revalidate and sync once the user is back online.
Advanced React PWA techniques
Once the React PWA is functional, you should take the security, performance, and delivery model to the standards.
HTTPS and security considerations
A PWA must run on HTTPS to secure data between the user’s device and web servers. Besides, browsers will refuse to register a service worker (responsible for caching, offline support, and other features) from an insecure origin.
There are other necessary settings to configure:
Enforce HTTP Strict Transport Security (HSTS) headers to prevent protocol downgrades
Enable HTTP/2 to reduce latency for React apps with multiple script chunks
Use libraries like DOMPurify to clean dynamic HTML to prevent cross-site scripting
Ensure the server sends proper headers if your service workers fetch APIs for third-party origins
Make sure preflight OPTIONS requests are supported on the server-side.
Performance optimization
Without optimization, JavaScript elements will be re-rendered unnecessarily and load slowly. A few tricks can make your app more responsive:
Use useMemo, React.memo, and useCallback wisely to avoid rerenders. Otherwise, React components may re-render every time a prop or state changes.
Use Webpack 5, Vite, or ESBuild to remove unused code during build.
Defer non-critical components using React’s lazy() + Suspense.
Combine lazy loading with React Router for per-page code splitting.
Define expiration, versioning, and fallback behavior if necessary.
The upcoming React Compiler will eventually automate much of this, wrapping components in memo, useMemo, and useCallback when needed. But until it’s stable, manual tuning is still essential for peak performance.
CI/CD and deployment
We recommend CI/CD platforms supporting HTTPS, atomic deployment, and automatic header caching configurations. Popular tools that help build, test, and push your app include Vercel, Netlify, and GitHub Pages.
You can deploy your app on a React-based PWA with platforms like Firebase Hosting. The deployment is possible with a few simple steps and terminal commands:
Install the Firebase command-line interface (CLI) globally on your machine via the npm install -g firebase-tools command.
Connect the CLI to your Firebase account (Google account).
Initialize the React project (package.json) via the firebase init command.
Choose “Hosting” and set build/ as a public directory.
Before deploying, check how your app behaves in production mode. To do this, build the app (npm run build) and serve it locally (npx serve -s build).
That was a lot. Let’s wrap up our guide by discussing popular PWAs built on React.
Real-world case studies and insight
You can find many companies that have built successful PWAs with React, but we want to focus on these companies.
Starbucks
Starbucks built a PWS with React for the front end and integrated GraphQL for ordering. The PWA allows users to browse the menu, customize orders, and add items to their cart from any device, even without a network connection. Most importantly, the app launched at just 233 KB — 99.84% smaller than their 148 MB iOS app.
Pinterest updated to PWA quite a while back. Pinterest rebuilt its mobile experience with React, Redux, and Webpack. The PWA was just 150 KB compared to 9.6 MB for Android and 56 MB for iOS. At the same time, the core JavaScript bundle shrank from 650 KB to 150 KB, and Time to Interactive dropped from 23s to 5.6s (down to 3.9s on repeat visits). Compared to the old web app, PWA delivered 44% more ad revenue and 60% more core engagements.
Tinder
Tinder rebuilt its mobile web experience into a PWA using React for UI and Redux for state management. This delivered many minor improvements, such as reducing their main JavaScript bundle from 166 KB to 101 KB and cutting their vendor chunk size by 15% with React 16. It helped produce an installable web app that delivers Tinder’s functionality at just 10% of the data cost of its native apps.
Embryonics
Overcode built the app for Embryonics using React.js, paired with Redux, TypeScript, and Redux-Saga. Our advanced web app allowed clinicians to view interactive embryo development timelines, evaluate oocyte quality, and feed that data into a neural network for predictive embryo grading. The platform contributed to Embryonics, securing $4 million in seed funding and its subsequent acquisition by fertility services company Rhea in 2023.
Voyagi
Voyagi travel planner web app was developed with React.js and Next.js to give a responsive feel across devices. The component-based structure made it easier to scale different features, like multi-stop route planning, chat collaboration, and hotel search. Besides, the architecture integrated data from APIs, including Google Maps, Google Places, Viator, and OpenAI.
TURN YOUR IDEA INTO A REACT PWA
Obercode team can help you build an enterprise-grade Progressive Web App on React
Schedule a call
React helps build installable, cross-platform Progressive Web Apps with a mobile-like feel. They can help reduce maintenance through reusable components and declarative programming, while service workers and cache assets improve page load speed. Basically, you can build and ship features faster while keeping the codebase clean.
Additionally, new technologies will make React PWAs even easier to develop. For example, WebAssembly modules will bring near-native performance to complex UI, while generative AI will help developers produce more compliant code. As PWAs become easier to publish on Android and iOS stores, your product will get even better visibility.
Companies scaling through React PWAs are seeing real business wins, as demonstrated by popular brands. If you're ready to replace an outdated web app, Overcode can help you build production-ready software using React and Next.js. We take care of everything, from architecture planning to post-deployment optimization.
NEED A RELIABLE TEAM TO BUILD YOUR PWA?
Overcode can help you modernize and scale the right way
Contact us
