A progressive web app (PWA) is a website built to work like an installed app. It can sit on the home screen, open full screen, load fast and keep working on a weak connection. It can also send notifications. One codebase runs on iPhone, Android and desktop, so you don’t need separate apps or an app store listing.
Three parts turn a normal site into a PWA: a web app manifest, a service worker and HTTPS. Below we explain each one in plain words. We also show real examples, walk through how a team builds a PWA and what it costs, and cover where PWAs fall short, especially on iPhone.
Key Takeaways
➤ A progressive web app (PWA) is a website you can install and use like an app, built from one codebase.
➤ Three parts make it work: a web app manifest, a service worker and HTTPS.
➤ Starbucks, Pinterest and Twitter Lite (now X) are well-known PWAs.
➤ A new PWA MVP usually takes 4–7 weeks. Adding PWA features to an existing web app is often a 1–2 week job.
➤ iPhone still has limits: no install prompt, push only after “Add to Home Screen”, and no Bluetooth or NFC.
What is a Progressive Web App (PWA)?
A progressive web app (PWA) is a web application that looks and behaves like a mobile app but runs in the browser. People open it from a normal link. They can also add it to their home screen or desktop, where it opens in its own window without the browser bar.
What makes Progressive Web Apps different from traditional websites is their ability to load quickly, stay responsive, and continue working even in low or unstable network conditions. Many PWAs also support features like push notifications, background updates, and home-screen installation, which improve usability and engagement.
The word “progressive” comes from progressive enhancement. The app works as a normal website in any browser, then turns on app features (install, offline use, notifications) where the browser supports them. It is built with the same HTML, CSS and JavaScript as any website. MDN’s PWA guide is the standard technical reference.
A quick test: open a site in Chrome on Android or on a desktop. If the menu offers “Install app” (or an install icon appears in the address bar), and the installed version opens without the browser bar, you are looking at a PWA.
Businesses and product teams often choose PWA development when they want to reach users across devices without maintaining separate mobile apps. This approach helps reduce development costs, improve performance, and deliver a consistent experience on smartphones, tablets, and desktops.
Key Benefits of Progressive Web Apps
Progressive Web Apps help businesses deliver faster, more reliable, and engaging digital experiences without the complexity of maintaining separate mobile and web applications.
Here are some of the most important advantages:
Faster Performance
After the first visit, the service worker loads the app’s shell (layout, styles and scripts) from the device. Repeat visits open almost at once instead of waiting on the network.
Offline Access and Reliability
A PWA can keep its screens and recent data on the device, so it still opens with weak or no signal. Example: a field-service checklist that saves entries offline and sends them when the connection comes back.
Cross-Platform Compatibility
A single Progressive Web App works across smartphones, tablets, and desktops, ensuring a consistent experience for all users.
Lower Development and Maintenance Costs
One codebase serves iPhone, Android and desktop. You ship a fix once, and every user gets it on their next visit. There is no app store review and no “please update” prompt.
Installable and App-Like Experience
Users can add a Progressive Web App to their home screen and access it like a native app, which encourages repeat usage and better retention.
If you’re considering building a Progressive Web App, understanding the development process and cost can help you plan effectively.
How Does a Progressive Web App Work?
A PWA is a normal web app plus three extra pieces. Here is what each one does, in plain words.
Service Workers
A service worker is a small script that the browser runs alongside your app. It sits between the app and the network and decides what to load from the device and what to fetch fresh. A common setup is “cache first” for the app shell, so it opens at once, and “network first” for live data such as prices or messages, so users don’t see old numbers. The service worker also receives push notifications.
Web App Manifest
The manifest is a small JSON file that tells the device how to install the app. It holds the app’s name and short name, its icons (at least 192 × 192 and 512 × 512 pixels), the page it opens on (start_url), theme colors, and "display": "standalone" so it opens without the browser bar.
Secure HTTPS Connection
Service workers only run on secure (HTTPS) pages, apart from localhost during development. Most modern hosts, such as Vercel or Netlify, give you HTTPS by default, so this part rarely costs extra.
Responsive Design
Developers design PWAs to work smoothly on different screen sizes and devices, ensuring a consistent experience across mobile, tablet, and desktop platforms.
How to Build a Progressive Web App, Step by Step
Here is what a team actually does to build a progressive web app, with typical time for an MVP. Bigger products repeat steps 3 to 7 for each feature.
1. Scope the app and check device needs (about 1 week)
List every must-have feature. Mark any that need Bluetooth, NFC, background location or App Store search. Those features push you toward a native or cross-platform app (see the iPhone limits below). You finish this step with a feature list, the main user flows and a clear PWA-or-native decision.
2. Design mobile-first screens (1–2 weeks)
Design the phone layout first, then scale up to tablet and desktop. Include two screens teams often forget: an offline state (what users see with no signal) and a short “how to install” hint for iPhone users.
3. Build the web app (most of the timeline)
Build the screens and the back end like any modern web app. We usually use Next.js and React on the front end, with Node.js or Supabase behind it. The PWA layer sits on top of this, so a solid web app comes first.
4. Add the manifest and icons (about a day)
Write the manifest, export the icon sizes, set the theme color and the start page. Check that the app opens without the browser bar once installed.
5. Add the service worker and caching (2–5 days)
Use a proven library such as Workbox, or Serwist in a Next.js app, rather than writing caching rules by hand. Decide which screens must work offline. For most business apps that is the shell, the last-viewed data and any form a user may fill in without signal.
6. Add push notifications if you need them (2–4 days)
Push needs a small back-end service that stores each device’s subscription and sends messages. On iPhone, a user must add the app to the home screen before they can allow notifications. Plan your onboarding around that.
7. Test on real devices (3–5 days)
In Chrome DevTools, open the Application panel to check that the manifest and service worker are detected, and run Lighthouse for speed. Then test on a real iPhone and a real Android phone, including in airplane mode.
8. Launch, and list it in stores if useful
Deploy over HTTPS. If you want a Google Play listing, wrap the PWA in a Trusted Web Activity. The Microsoft Store also accepts PWAs. Apple’s App Store does not list PWAs.
Putting it together: adding PWA features to an existing, well-built web app is often 1–2 weeks of work. A new PWA MVP usually takes 4–7 weeks, and a full first version 8–14 weeks.
Technologies and Frameworks Used in Progressive Web Apps
Developers build Progressive Web Apps using modern JavaScript frameworks and tools that help improve performance, scalability, and maintainability. The choice of technology often depends on the project requirements, team expertise, and expected traffic.
React
React is widely used for building fast and interactive user interfaces. Many developers combine React with service worker libraries to add offline support and caching.
Angular
Angular provides built-in support for Progressive Web Apps, making it easier to configure service workers and optimize performance during development.
Vue.js
Vue is a lightweight framework that works well for building Progressive Web Apps, especially when speed and simplicity are important.
Next.js and Other Modern Frameworks
Next.js is our default for PWAs. It renders pages on the server for speed and SEO, and you add the manifest and a service worker library (such as Serwist) on top. React apps built with Vite can use the Vite PWA plugin in the same way.
Firebase and Cloud Services
Many teams use platforms like Firebase for hosting, real-time data, and authentication, which simplifies backend integration for PWAs.
How Much Does Progressive Web App Development Cost?
A progressive web app costs about the same as the web app underneath it. The PWA layer itself (manifest, service worker, offline screens and install hints) is a small part of the budget. Typical ranges in 2026:
- PWA features added to an existing web app:
Often 1–2 weeks of work, if the app is already responsive and on HTTPS. - Content or marketing PWA:
Approximately $3,000 – $8,000
Installable, with key pages readable offline. - PWA MVP:
Approximately $12,000 – $25,000, in 4–7 weeks
Login, a dashboard, one core workflow and offline basics. - Full first version (V1):
Approximately $25,000 – $60,000, in 8–14 weeks
Several user roles, payments, integrations and push notifications. - Enterprise or marketplace platform:
Approximately $60,000 – $150,000+, in 16–30 weeks
Real-time features, complex permissions, many integrations and compliance work.
The actual cost depends on factors such as:
- UI/UX design complexity
- Number of features and integrations
- Performance and scalability requirements
- Security and compliance needs
- Ongoing maintenance and updates
For a feature-by-feature breakdown, see our custom web app development cost guide. A quick check before you budget: if the same product would otherwise need a website plus separate iOS and Android apps, compare one PWA build against two or three codebases to build and maintain.
Progressive Web App vs Native App
Businesses often compare progressive web apps and native mobile apps when deciding how to build a digital product. Both approaches can deliver high-quality user experiences, but they differ in development, cost, performance, and distribution.
Here’s a simple comparison:
| Feature | Progressive Web App (PWA) | Native App |
|---|---|---|
| Installation | Installable from browser | Download from App Store or Play Store |
| Development | Single codebase for all platforms | Separate apps for iOS and Android |
| Performance | Fast, optimized for web | Very high, device-optimized |
| Offline Support | Available (via caching) | Fully supported |
| Updates | Automatic in the background | Manual updates via app stores |
| Cost | Lower development and maintenance cost | Higher cost due to multiple platforms |
| Distribution | Accessible through a URL | Requires app store submission |
| Access to Device Features | Camera, location and notifications; no Bluetooth or NFC on iPhone | Full access, including Bluetooth, NFC and background tasks |
| App store listing | Not in Apple’s App Store; can be listed on Google Play and the Microsoft Store | Listed in the App Store and Google Play |
In many cases, businesses choose Progressive Web App development to achieve faster time-to-market, lower costs, and broad device accessibility. Native apps remain a strong choice when deep hardware integration or maximum performance is required.
PWA Limits on iPhone (iOS)
Most of the gap between PWAs and native apps shows up on iPhone. Apple supports PWAs, but with limits you should plan around before you commit:
- No install prompt. Android and desktop Chrome can show an “Install” button. On iPhone, users must tap Share, then “Add to Home Screen”, so add a short hint for iPhone visitors.
- Push needs iOS 16.4 or later, and it only works after the user adds the app to the home screen (WebKit’s announcement).
- No background sync. Uploads and syncs only run while the app is open.
- No Web Bluetooth or Web NFC. Apps that talk to wearables, smart locks or other devices need native code.
- No App Store listing. People who search the App Store won’t find your PWA.
- Stored data can be cleared. Safari can remove website data that hasn’t been used for a while, so keep anything important on your server.
A five-minute test: add your PWA to an iPhone home screen, switch on airplane mode and open it. If you see a blank screen or Safari’s offline page, the service worker isn’t caching the app shell yet.
If these limits hit your must-have features, read our PWA vs native app comparison before you decide.
When Should You Choose a Progressive Web App?
A Progressive Web App is a strong choice when you want to deliver a fast, reliable, and mobile-friendly experience without the complexity of building separate native apps. Many businesses use Progressive Web App development to reach users across devices while keeping development and maintenance efficient.
You should consider building a Progressive Web App if:
You want a mobile-first experience
PWAs provide smooth navigation and fast loading directly in the browser, making them ideal for users who primarily access services on mobile devices.
You need a faster time to market
With a single codebase serving multiple platforms, businesses can launch products more quickly compared to developing separate native apps.
You want to reduce development and maintenance costs
Maintaining one application instead of multiple platform-specific apps helps save time, effort, and long-term costs.
Your users may have slow or unstable internet connections
Offline capabilities and caching allow Progressive Web Apps to remain usable even in low-connectivity environments.
You want broad accessibility across devices
PWAs run on desktops, tablets, and smartphones, allowing businesses to reach a wider audience through a single solution.
Choose a native or cross-platform app instead if
- Your app must talk to Bluetooth or NFC devices, such as wearables or smart locks.
- It needs heavy background work, such as location tracking or step counting.
- App Store search is one of your main ways to get new users.
- It relies on demanding graphics, such as 3D games or AR.
In those cases, a cross-platform app is usually the better fit. Our React Native vs Flutter guide explains the choice, and you can see how we approach mobile app development.
Real-World Examples of Progressive Web Apps
Many well-known companies use Progressive Web Apps to deliver fast, reliable experiences without requiring users to install native applications.
Alibaba
Alibaba.com moved its mobile site to a PWA so business buyers get an app-like experience straight from a search result, without downloading an app first.
Starbucks
Starbucks’ ordering PWA lets customers browse the menu, customize drinks and add them to the basket even with a weak or no connection, then check out once they are back online. It is a good model for any ordering flow people use on the move.
Pinterest rebuilt its mobile website as a PWA in 2017 to make it faster for the many people who reach it from a phone browser rather than the app.
Twitter Lite (now X)
Twitter launched Twitter Lite in 2017 as its default mobile web experience. It was built for slow networks and costly data plans, with a data saver mode that loads images only when tapped.
The pattern is the same in each case: lots of people reach the product through a mobile browser and won’t install an app first. If that describes your users, a progressive web app is worth a serious look.
Frequently Asked Questions About Progressive Web Apps
A progressive web app is a website you can install and use like an app. It opens from a normal link, can sit on your home screen, loads fast after the first visit and can keep working on a weak connection. One codebase runs on iPhone, Android and desktop.
Every PWA is a website, but not every website is a PWA. A PWA adds a web app manifest, a service worker and HTTPS. Together they make it installable, faster on repeat visits and usable offline.
Yes. On iPhone, users install a PWA by tapping Share, then Add to Home Screen. Push notifications work on iOS 16.4 and later, once the app is on the home screen. There is no install prompt, no background sync and no Bluetooth or NFC access.
Google Play, yes: you wrap the PWA in a Trusted Web Activity. The Microsoft Store accepts PWAs too. Apple’s App Store does not list PWAs, so to appear there you need a native or cross-platform app.
Adding PWA features to an existing web app often takes 1–2 weeks. A new PWA MVP usually takes 4–7 weeks, and a full first version 8–14 weeks.
About the same as the web app underneath it. A PWA MVP is usually $12,000–$25,000, a full first version $25,000–$60,000, and larger platforms $60,000 and up. Our custom web app development cost guide breaks this down.
Often, yes. Most SaaS users already work in the browser, and a PWA adds install, faster repeat loads and notifications without separate apps. Choose a native or cross-platform app if core features need device hardware such as Bluetooth or NFC.
Final Thoughts
A progressive web app gives you one product that works in any browser, installs like an app and keeps working on a weak connection. It is the right call when most of your users arrive from the web and your must-have features don’t depend on Bluetooth, NFC, heavy background work or App Store search. If they do, go native or cross-platform.
Planning a Progressive Web App?
Planning a PWA, or not sure you need one? Book a free 30-minute call and we’ll go through your feature list, flag anything iPhone won’t support, and give you a realistic cost and timeline range. You can also see how we approach web app development or browse our projects.
