juniorPWA

What is a Progressive Web App (PWA), and how does it differ from a traditional web application?

Updated Feb 20, 2026

Short answer

A Progressive Web App (PWA) is a web application that uses modern browser capabilities to deliver an app-like experience, including offline support, installation, and fast loading. Unlike a traditional web application, a PWA can work reliably across network conditions while still being built with standard web technologies.

Deep explanation

A Progressive Web App is a website enhanced with browser features that make it behave more like a native mobile or desktop application. The goal is not to replace the web, but to combine the reach of websites with the usability of installed apps.

A PWA is still a web app at its core: it uses technologies like `HTML`, `CSS`, and `JavaScript`. The difference is that it adds capabilities through browser APIs, especially:

Web App Manifest: A file such as manifest.json that describes the app name, icons, theme colors, and installation behavior.
Service Worker: A background script that can intercept network requests, manage caching, and enable offline experiences.
HTTPS: Required for service workers because they can access sensitive browser capabilities.
Push notifications: Allow apps to re-engage users, depending on browser and platform support.

How a PWA works

A traditional website usually depends on a live connection to a server. A PWA introduces a layer between the browser and the network.

Rendering diagram…

The first visit usually downloads the application's resources and registers the service worker. Later visits can load important files from the cache first, making the experience faster and more resilient.

PWA versus traditional web application

Area	Traditional Web App	Progressive Web App
Installation	Runs in browser only	Can be installed like an app
Offline support	Usually unavailable	Supported through caching strategies
Technologies	`HTML`, `CSS`, `JavaScript`	Same technologies plus PWA APIs
Updates	Usually refreshed from server	Can update assets through service workers

⚡ The key interview point: a PWA is not a new programming language or framework; it is a set of enhancements built on top of the web platform.

Service worker responsibilities

A service worker runs separately from the main browser page. It can handle events such as fetch requests and decide whether to use cached data or request fresh data.

Example service worker logic:

service-worker.js

JavaScript

1self.addEventListener("fetch", (event) => {
2  event.respondWith(
3    caches.match(event.request).then((cachedResponse) => {
4      return cachedResponse || fetch(event.request);
5    })
6  );
7});

This example uses a cache-first strategy: return cached content when available, otherwise fetch it from the network.

Trade-offs and limitations

PWAs provide many benefits, but they are not identical to native applications.

Advantages:

Faster repeat visits because resources can be cached.
Better user experience on unreliable networks.
Installable without a traditional app store in many cases.
One codebase can serve multiple platforms.

Limitations:

Some device features may have limited browser support.
Background processing capabilities are more restricted than native apps.
App store distribution may require additional packaging.

The interviewer is usually checking whether you understand that "progressive" means improving the experience based on available browser features, not requiring every feature everywhere.

Real-world example

Imagine an online food delivery company with many users on slow mobile networks. A PWA version could cache the restaurant list, app layout, and user interface so the app opens quickly even when the connection is weak.

The first visit downloads core resources:

JavaScript

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js");
}

After installation, users can launch the app from their home screen, browse previously loaded content offline, and receive updates when the network becomes available again.

A simplified flow looks like this: