Progressive Web App (PWA)
What is a Progressive Web App?
A Progressive Web App -- PWA -- is a web application built with standard web technologies (HTML, CSS, JavaScript) that leverages modern browser APIs to behave like a native mobile or desktop application. PWAs can be installed on the home screen, work offline or on unreliable networks, send push notifications, and access device hardware like cameras and geolocation. They are served over HTTPS, load instantly through service worker caching, and update themselves seamlessly in the background.
The "progressive" in the name refers to progressive enhancement: the application works for every user regardless of browser or device, but provides enhanced capabilities -- offline access, installation, notifications -- on browsers that support them. A user on an older browser gets a functional website; a user on a modern browser gets an app-like experience.
Why does it matter?
The traditional choice between a web application and a native mobile app involves painful tradeoffs. Native apps offer superior performance, offline capability, push notifications, and home screen presence -- but they require separate codebases for iOS and Android, approval from app stores, and users must actively download and install them. Web applications are instantly accessible via URL, work on every platform, and require no installation -- but they historically lacked offline support, push notifications, and the immersive full-screen experience.
PWAs bridge this gap. They combine the reach of the web with the capabilities of native apps. Users discover the application through a URL or search engine, use it in the browser, and optionally install it to their home screen -- no app store required. The installed PWA runs in its own window, appears in the task switcher, and is indistinguishable from a native app in daily use.
The business implications are significant. Maintaining one codebase instead of three (web, iOS, Android) reduces development and maintenance costs substantially. Updates are deployed to the server and available immediately to all users -- no app store review process, no version fragmentation, no "please update your app" prompts. User acquisition costs drop because there is no app store installation friction; users engage through a link rather than navigating a store listing.
Companies like Twitter, Starbucks, Pinterest, and Uber have reported measurable improvements after launching PWAs: higher engagement rates, lower bounce rates, increased conversions, and reduced data usage compared to their native apps. For businesses where mobile development costs are a concern, PWAs offer a compelling alternative that delivers 80-90% of native app capabilities at a fraction of the development investment.
Progressive Web App in practice
A PWA is built on three technical pillars: a web app manifest, a service worker, and HTTPS.
The web app manifest is a JSON file that tells the browser how the application should behave when installed. It defines the app name, icons, theme colors, display mode (standalone, fullscreen, minimal-ui), start URL, and orientation. When the browser detects a manifest and determines the PWA meets installation criteria, it prompts the user to add the app to their home screen.
The service worker is a JavaScript file that runs in the background, separate from the main application. It intercepts network requests and serves cached responses when the network is unavailable. Cache strategies range from cache-first (serve cached content, update in background) to network-first (try the network, fall back to cache) to stale-while-revalidate (serve cached content immediately, update cache from network). The service worker also enables push notifications and background synchronization.
A practical example: a field service application built with React and Next.js as a PWA. Technicians install it on their tablets. When they are on-site -- potentially without reliable internet -- the service worker serves cached work orders, customer data, and equipment manuals. They complete their reports offline, and the service worker synchronizes the data when connectivity returns. Push notifications alert them to new assignments. The entire experience runs from a single TypeScript codebase deployed to a web server, not through app stores.
Performance is the foundation that makes everything else work. A PWA that loads slowly on a 3G connection fails at its core promise. Server-side rendering ensures fast initial loads. Code splitting delivers only the JavaScript needed for the current page. Image optimization and lazy loading reduce bandwidth. A design system with consistent, lightweight components keeps the UI responsive across devices. Lighthouse audits -- Google's PWA assessment tool -- provide actionable metrics for performance, accessibility, and PWA compliance.
The limitations are real but narrowing. PWAs on iOS have historically had restrictions -- limited background processing, no push notifications until recently, storage quotas. These restrictions have been relaxing with each Safari release. For applications that require deep hardware access (Bluetooth, NFC, advanced camera controls), native development or a hybrid approach remains necessary. For the majority of business applications, PWAs provide sufficient capability with dramatically lower development and distribution costs.
Related concepts
- Server-Side Rendering -- Fast initial loads for PWA content
- Design System -- Consistent UI components across all devices
- TypeScript -- Type-safe PWA development
- Mobile Development Services -- PWA and native app development
- React Development -- Building PWAs with React