What Is a Progressive Web App (PWA)?
Learn what a PWA is — manifest, service worker, offline support, and how it degrades gracefully across browsers.
Expected Interview Answer
A Progressive Web App is a website built with a web app manifest and a service worker so it can be installed to a device’s home screen, launch in its own window, and work offline or on flaky networks, while still being reachable as an ordinary URL.
The manifest is a JSON file declaring the app’s name, icons, start URL, and display mode (like `standalone`, which hides the browser chrome so the app looks native), letting browsers offer an install prompt that adds a home-screen icon. The service worker, registered from the page, intercepts network requests and applies caching strategies so core assets and even prior data remain available without a live connection, and it can also enable background sync and push notifications. Crucially, a PWA is progressive: it degrades gracefully — a browser that ignores the manifest or lacks service worker support still renders the same underlying website normally, unlike a native app that requires a store install to exist at all. This makes PWAs attractive for reducing the cost of maintaining separate iOS/Android/web codebases while still capturing installability, offline resilience, and some native-like capabilities from a single deployable web app.
- Installable to the home screen without an app-store submission process
- Works offline or under poor connectivity via service worker caching
- Degrades gracefully to a normal website in browsers without full PWA support
- Single codebase avoids maintaining separate native iOS/Android apps
AI Mentor Explanation
A PWA is like a franchise team that can be watched as a regular broadcast on any TV, but fans who want more can also install a dedicated app-like widget on their home screen for one-tap access, with match highlights cached for viewing even without signal in the stadium tunnel. If the widget feature isn’t supported on an old TV, the broadcast still plays normally either way. That works-as-a-broadcast-but-upgrades-when-supported principle is exactly what makes a website progressive into an installable app.
Step-by-Step Explanation
Step 1
Add a web app manifest
A manifest.json declares name, icons, start_url, and display mode like standalone.
Step 2
Register a service worker
The page registers a service worker to intercept requests and cache assets for offline use.
Step 3
Serve over HTTPS
Service workers and install prompts require a secure context (HTTPS or localhost).
Step 4
Meet installability criteria
Browsers offer an install prompt once the manifest, service worker, and icons meet their heuristics.
What Interviewer Expects
- Ability to name the two core building blocks: web app manifest and service worker
- Understanding of graceful degradation — the site still works without full PWA support
- Awareness of installability requirements (HTTPS, manifest, service worker)
- Mention of trade-offs vs native apps (limited access to some device APIs, app-store discoverability)
Common Mistakes
- Confusing a PWA with a native app wrapper (e.g. assuming it must go through an app store)
- Forgetting that HTTPS is required for service worker registration and install prompts
- Claiming a PWA works offline automatically without an explicitly authored caching strategy
- Not mentioning that the site must remain functional in browsers that ignore the manifest entirely
Best Answer (HR Friendly)
“A Progressive Web App is a regular website that has been enhanced so it can be installed to your phone’s home screen, open like a real app without browser bars, and keep working even with a spotty connection. It still works as a normal site for anyone whose browser doesn’t support those extra features, which is why it’s called progressive — it upgrades the experience without breaking the baseline.”
Code Example
// manifest.json
{
"name": "SkillVeris Learning",
"short_name": "SkillVeris",
"start_url": "/",
"display": "standalone",
"background_color": "#0f172a",
"theme_color": "#0f172a",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
// registration in app code, over HTTPS only
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
}Follow-up Questions
- What are the installability criteria browsers check before offering a PWA install prompt?
- How does a PWA differ from a native app in terms of device API access?
- What role does the display mode in the manifest play in the installed experience?
- How would you implement offline support and background sync for a PWA?
MCQ Practice
1. What two artifacts are required to turn a website into a PWA?
The manifest declares install metadata; the service worker enables offline caching and background features.
2. What does “progressive” mean in Progressive Web App?
A PWA layers enhancements on top of a normal website, which still functions without those enhancements.
3. What is required for service worker registration to succeed?
Service workers only register in secure contexts to prevent man-in-the-middle request interception.
Flash Cards
What two files/scripts define a PWA? — A web app manifest (manifest.json) and a registered service worker.
What does “progressive” mean here? — It degrades gracefully — works as a normal site without PWA support.
What secure context is required for service workers? — HTTPS (or localhost during development).
What does display: standalone do? — Hides browser chrome so the installed app looks native.