Progressive Web Apps (PWAs): What They Are and How to Build One

Progressive Web Apps (PWAs) combine the reach of the web with many native app capabilities. Users get an app-like experience without the traditional app-store download process, while developers can build and maintain experiences from a shared web codebase.

This doesn’t mean PWAs are simple to build, however. They must provide a reliable experience across different browsers, devices and network conditions. This means developers need to manage all the different environments where the app will show up.

This guide will equip you with the skills to do this. By the end, you’ll be able to:

• Build a working PWA using an AI-assisted workflow.
• Understand how a PWA works, from the service worker to HTTPS.
• Choose what to build: a PWA, a native app or a standard website.
• Pick the right framework for your stack, whether that’s React, Angular, Vue, or plain JavaScript.

What is a Progressive Web App (PWA)?

A Progressive Web App is a browser-based application that can feel and behave like an installed mobile app. This provides a number of specific benefits for developers, including:

• Simple server deployment with no App Store or Play Store bottlenecks.
• Potentially lower maintenance costs than separate native applications.
• Centralized deployment of fixes and upgrades.
• Tighter controls over releases.
• A mature ecosystem of frameworks, libraries, testing tools, and deployment platforms.

The main advantage is simple. We can ship one web-based experience across platforms while still giving users some native-app behavior.

What are the core components of a Progressive Web App?

Every PWA relies on these three core components:

Component	What it does
Web app	Provides the interface, content, and application logic.
Service worker (where required)	Runs in the background to manage caching, network requests, offline behavior, and push notifications.
Web app manifest	Tells the browser how the app should appear when installed, including its name, icon, start URL, and display mode.

Note that most PWA features require the application to be served over HTTPS. This is something that junior PWA developers occasionally trip up on.

How progressive web apps work

Progressive Web Apps work by letting the browser decide what comes from the network, what comes from local cache, and how the app launches after installation.

1. The user opens the PWA from a URL.
2. The browser loads the app shell, scripts, styles, and assets.
3. A service worker can intercept requests and cache selected resources locally.
4. Future visits reuse cached files instead of requesting everything again.
5. If connectivity drops, the app can still show cached screens or data.
6. When installed, the browser launches the app using the manifest settings.

Common Progressive Web App use cases

Organizations typically use Progressive Web Apps when they want to reach users across multiple platforms. This is particularly useful for those organizations that run customer-facing services, have diverse user bases or simply want to reduce development spend.

Common use cases include:

Use case	Example applications
Ecommerce	Online stores, marketplaces, product catalogs
SaaS	Dashboards, CRM platforms, analytics tools
Media and publishing	News websites, blogs, magazines
Booking platforms	Travel, events, appointments, reservations
Internal tools	Employee portals, inventory systems, reporting tools
Communication	Customer portals, support centers, community platforms

A number of large consumer brands have built PWAs to extend the reach of their apps onto the mobile web. Examples include Uber’s m.uber.com and Spotify’s web player.

Progressive Web Apps vs Native Apps: Trade-offs

Both PWAs and native apps can deliver a mobile-friendly experience, but they prioritize different goals. While PWAs are all about accessibility and simplicity, native apps provide a dedicated experience for their particular platform.

Progressive web apps	Native apps
One codebase for web, mobile, and desktop.	Separate applications for each platform.
Installed directly from the browser.	Distributed through app stores.
Updates are available immediately after deployment.	Updates typically require app store approval.
Lower development and maintenance costs.	Higher development costs, but deeper platform integration.
Access to many device features through browser APIs.	Full access to device hardware and operating system features.
Best for content, ecommerce, SaaS, and business applications.	Best for performance-intensive or hardware-dependent applications.

How to decide between a PWA and a native app

Choose a PWA when reach, speed, and simpler maintenance matter more than deep device integration.

Choose a native app when the product depends heavily on platform-specific features or maximum performance.

Scenario	Better choice
We need to launch quickly across web and mobile.	Progressive Web App
We want one single codebase to maintain.	Progressive Web App
Users should access the app without an app store.	Progressive Web App
Updates need to ship without app store approval.	Progressive Web App
The app needs advanced camera, Bluetooth, NFC, or sensor access.	Native app
The experience depends on high-performance graphics or heavy processing.	Native app
We want users to discover the product by searching inside the App Store or Google Play.	Native app

Frameworks for building PWAs

Your choice of framework often flows from your team’s technology stack. For most organizations, the best PWA framework is one that integrates well with the existing product, development workflow and team expertise.

• Vanilla JS + Vite: best for small PWAs where we want a lightweight setup and full control.
• React: adds PWA behavior through libraries or build plugins on top of an existing component-based app.
• Angular: includes built-in PWA tooling through @angular/pwa for larger apps.
• Vue: offers a clear path to caching, installability and offline support.

Now, let’s look at the practical skills needed to build a Progressive Web App.

How to build a Progressive Web App

To build a Progressive Web App you’ll need a combination of core coding skills (HTML, CSS and JavaScript), frontend framework development experience and knowledge of core PWA technologies like service workers, web app manifests and caching strategies.

To demonstrate the process, we’ll build a simple to-do list PWA. The application will:

• Allow users to add and complete tasks.
• Store tasks locally in the browser.
• Continue working offline.
• Be installable from the browser.

We’re also going to use an AI coding agent to get things started. Many developers now use agents such as Claude Code, Codex, Cursor or Gemini CLI to generate the initial project structure. The agent matters much less than verifying the resulting PWA.

Step 1: Generate the project with an AI coding agent

Create an empty folder and open your preferred AI coding agent (Claude Code, Codex, Cursor, Gemini CLI, or similar) inside it.

mkdir todo-pwa
cd todo-pwa
claude

If you’re using another AI coding agent, type codex, gemini, cursor, or its equivalent instead.

Then ask the agent to create the project:

Create a Vite-based to-do list Progressive Web App using vanilla JavaScript and vite-plugin-pwa.

The app should:
- Allow users to add tasks
- Allow users to mark tasks as completed
- Store tasks in Local Storage
- Include a web app manifest
- Register a service worker
- Support offline usage
- Be installable from the browser
- Include simple, clean CSS

Review the proposed actions before approving them.

For this tutorial, the agent should create the project files, install dependencies, configure the PWA, and explain how to run it. Once the application builds successfully and opens locally, that is usually enough.

If the agent starts installing browser automation tools, generating screenshots, running end-to-end tests, or creating extra infrastructure, be sure to pause and check whether those steps are actually needed.

Verify the generated project structure

Before continuing, check that the generated project contains the expected files.

A typical Vite-based PWA should look similar to this:

todo-pwa/
├── public/
│   ├── manifest.webmanifest
│   ├── icon-192.png
│   ├── icon-512.png
│   └── favicon.ico
├── src/
│   ├── main.js
│   └── style.css
├── index.html
├── package.json
└── vite.config.js

The exact structure may vary depending on the AI coding agent or framework, but these files are the most important:

File	Purpose
package.json	Lists the project dependencies and scripts.
vite.config.js	Configures Vite and vite-plugin-pwa, including the web app manifest and service worker generation.
index.html	Provides an entry point for the application and references the web app manifest.
src/main.js	Contains the application logic and registers the service worker.
public/	Stores static assets such as icons and the favicon used by the PWA.

If one or more of these files are missing, ask the AI agent to explain why before continuing.

Step 2: Run and verify the app locally

Once the project is created, run it locally:

npm install
npm run dev

Open the local URL shown in the terminal.

Add a few tasks, refresh the page, and confirm they stay visible. This verifies that the basic app and Local Storage are working before testing PWA behavior.

If a task disappears after a refresh, check that the app is actually writing to Local Storage rather than to in-memory state.

Step 3: Build and test the PWA

Several of the features that make a PWA a PWA – like service workers, caching, asset handling and installation – depend on the way the application is built and served. So it’s important to check the PWA behavior once you’ve created the production build.

First, use the Node Package Manager (NPM):

npm run build
npm run preview

Open the preview URL, then check Chrome DevTools:

Application > Manifest
Application > Service Workers

The manifest should be detected, and the service worker should be active.

If the service worker does not appear, make sure you are testing the preview build, not just the development server.

Optionally, run a Lighthouse audit in Chrome DevTools to verify installability and other PWA requirements before deployment.

Step 4: Deploy and install the PWA

HTTPS is required for most PWA features. To ensure this functionality, deploy the app to Vercel:

npm install -g vercel
vercel

Open the Vercel URL on a phone.

• On Android, use Chrome > Install app.
• On iPhone, use Safari > Share > Add to Home Screen.

If the install option doesn’t appear immediately, refresh the page once or reopen it after it finishes loading.

After installation, open the app once, turn on airplane mode, and reopen it. If it loads and keeps saved tasks, the PWA is working.

Debugging Progressive Web Apps

When debugging Progressive Web Apps, you’re debugging both a web application and an application runtime built around the browser. So PWAs add more moving parts than standard websites. Service workers, cached assets, offline behavior, browser differences, and installation flows can all make bugs harder to reproduce locally.

That is where production visibility matters. We need to understand:

• What happened on the user’s device.
• Which browser they used.
• Whether the app was online or offline.
• What errors appeared during the session.

Bugfender helps teams collect logs, errors, crashes, and user feedback from real devices, so debugging does not depend only on local reproduction.

Try Bugfender for Free

FAQs about progressive web apps

Can progressive web apps work offline?

Yes. Service workers cache key assets and data, so a PWA keeps working without a connection. The level of offline support depends on what the developer chooses to cache and which strategy they apply.

Do PWAs work well on iPhone?

They work, but with limits. Safari supports installation through Add to Home Screen, but iOS behavior can differ from Android for storage, background behavior, and some advanced web APIs. Test iPhone behavior before relying on PWA-specific features.

How much does it cost to build a PWA?

The cost of building a Progressive Web App depends on its features, integrations, and complexity.

As a general guideline in 2026:

Project complexity	Typical cost (USD)
Simple PWA (to-do list, portfolio, brochure, small business app)	$500 to $5,000
Medium PWA (SaaS dashboard, booking system, ecommerce, CRM)	$5,000 to $30,000
Enterprise PWA (custom integrations, authentication, offline sync, complex business logic)	$30,000 to $150,000+

These are practical market estimates, not fixed industry benchmarks.

Modern AI coding tools have reduced development time considerably by generating boilerplate, scaffolding projects, and assisting with implementation. However, developers still need to review the code, test the application across browsers and devices, and validate production behavior before deployment.

Are PWAs good for SEO?

Yes, PWAs can be good for SEO when pages are crawlable, fast, and rendered in a way search engines can access. A PWA is still a website, but poor JavaScript rendering, blocked resources, or inaccessible routes can hurt visibility.

Does a PWA need a different framework for offline support?

No. Offline support comes from the service worker and caching strategy, not the framework. Any framework, including plain JavaScript, can deliver offline support once a service worker is registered.

Can an existing website be converted into a PWA?

Yes. Add a web app manifest, register a service worker, and serve the site over HTTPS. Most of the work is adding these three pieces to an existing codebase rather than rebuilding it from scratch.