A Progressive Web App (PWA) is a website built using standard web technologies — HTML, CSS, and JavaScript — that delivers an app-like experience to users: it installs on the home screen, works offline, sends push notifications, and loads instantly. For Indian businesses, PWAs solve a critical problem — reaching the 70%+ of users on budget Android phones with limited storage who cannot or will not download another native app, while still providing the engaging, fast experience that drives conversions.
Last updated October 2026
What Makes a Website a Progressive Web App?
A PWA requires three core technical components:
1. Service Worker
A JavaScript file that runs in the background, separate from the web page. It intercepts network requests, caches resources, and enables offline functionality. The service worker is what makes PWAs work without an internet connection — it serves cached content when the network is unavailable.
2. Web App Manifest
A JSON file (manifest.json) that tells the browser about your PWA — its name, icons, theme color, display mode (fullscreen, standalone, or minimal-ui), and start URL. This enables the “Add to Home Screen” prompt and controls how the app appears when launched.
3. HTTPS
PWAs require a secure connection. Service workers only run over HTTPS (except on localhost during development). Every modern website should use HTTPS anyway, so this is rarely a blocker.
Why Should Indian Businesses Consider PWAs?
| Challenge in India | How PWA Solves It |
|---|---|
| Limited device storage (budget phones with 16-32 GB) | PWAs are typically 1-5 MB vs 50-200 MB for native apps |
| Slow/intermittent connectivity (2G/3G in rural areas) | Offline mode serves cached content; syncs when online |
| App install friction (users abandon at download screens) | Instant “install” from the browser with no Play Store visit |
| High data costs | Caching reduces data usage by 60-80% on repeat visits |
| App Store restrictions (review process, fees) | Deploy instantly; no 30% commission; update without user action |
Success Stories
- Flipkart Lite: One of India’s first major PWAs. Saw 3x increase in time spent on site and 70% increase in conversion rate compared to their mobile site.
- OLX: PWA reduced page load time by 80%, increased re-engagement by 250%, and saw 146% higher conversion rates.
- MakeMyTrip: PWA tripled session time and increased conversion rate by 160% on first visit.
How to Build a Progressive Web App: Step-by-Step
Step 1: Create the Web App Manifest
Create a manifest.json file in your root directory:
{
"name": "Your Business Name",
"short_name": "BizName",
"description": "Description of your PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#FF6B35",
"icons": [
{"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"},
{"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"}
]
}Link it in your HTML head: <link rel="manifest" href="/manifest.json">
Step 2: Register a Service Worker
Create a sw.js file that caches your critical assets and serves them when offline. The basic strategy is “Cache First, Network Fallback” for static assets and “Network First, Cache Fallback” for dynamic content (API responses, product data).
Step 3: Implement Offline Support
Decide your caching strategy:
- App Shell model: Cache the basic UI framework (header, navigation, footer) and load content dynamically. Best for news sites, social feeds, and content-heavy apps.
- Full page caching: Cache entire pages including content. Best for product catalogs, blogs, and reference documentation.
- Offline fallback: At minimum, show a branded offline page instead of Chrome’s dinosaur game. This maintains trust and branding even when connectivity drops.
Step 4: Add Install Prompt
Listen for the beforeinstallprompt event and show a custom “Add to Home Screen” prompt at the right moment — after the user has engaged with your site (visited 2+ pages, spent 30+ seconds), not on the first visit.
Step 5: Implement Push Notifications (Optional)
Use the Push API and Notifications API to re-engage users:
- Order status updates for e-commerce
- Price drop alerts for products they viewed
- New content notifications for blogs/news
- Abandoned cart reminders
Request notification permission contextually, not on page load. Show a custom in-page prompt explaining the benefit before triggering the browser permission dialog.
PWA for WordPress and WooCommerce
WordPress sites can be converted to PWAs using plugins:
- SuperPWA: Free, simple, generates manifest and service worker. Good for blogs and content sites.
- PWA for WP & AMP: More features — offline pages, custom install banner, multi-site support.
- WooCommerce-specific considerations: Cache product catalog pages but never cache cart, checkout, or my-account pages. Dynamic pricing and inventory must always fetch from the server.
PWA Performance Optimization for Indian Networks
- Pre-cache critical resources: Include your CSS, JS, key images, and offline page in the install event so they are available immediately.
- Background sync: If a user fills a form while offline, queue the submission and send it automatically when connectivity returns.
- Adaptive loading: Detect connection speed using the Network Information API and serve lower-resolution images on slow connections.
- Compression: Enable Brotli compression (20-30% smaller than gzip) for text resources.
- Route-based code splitting: Load only the JavaScript needed for the current page, not the entire application bundle.
The MAD’s web development team builds PWAs for Indian businesses — from converting existing WordPress sites to building custom PWAs for e-commerce, SaaS dashboards, and enterprise applications. Discuss your PWA project with us.
Frequently Asked Questions
Do PWAs work on iPhones and iPads?
Yes, but with limitations. Safari supports service workers and the manifest file, enabling offline mode and home screen installation. However, iOS restricts push notifications for PWAs (added in iOS 16.4+), limits cache storage to 50 MB, and does not show an automatic install prompt — users must manually use “Add to Home Screen” from the share menu. For iOS-heavy audiences, consider a hybrid approach (PWA + native wrapper).
Can a PWA replace a native mobile app?
For most content-driven and e-commerce applications, yes. PWAs can handle 80-90% of what native apps do: offline access, push notifications, camera access, geolocation, and payment APIs. Native apps are still necessary for heavy device integration (Bluetooth, NFC, complex animations, AR) or when App Store visibility is a key acquisition channel.
How much does it cost to build a PWA in India?
Converting an existing responsive website to a basic PWA (manifest + service worker + offline page) costs ₹20,000-50,000. Building a feature-rich PWA from scratch (custom UI, offline data sync, push notifications, background sync) ranges from ₹2-10 lakhs depending on complexity. This is still 40-60% cheaper than building separate iOS and Android native apps.
Does Google index PWAs differently than regular websites?
No. A PWA is a regular website with enhanced capabilities. Google crawls and indexes it like any other website. In fact, PWAs often rank better because they tend to be faster, more mobile-friendly, and provide better user experience metrics — all of which are ranking signals.
What is the difference between a PWA and a hybrid app?
A PWA runs entirely in the browser and is accessed via URL (installable but not distributed through app stores by default). A hybrid app (built with frameworks like React Native, Flutter, or Ionic) is packaged as a native app and distributed through Play Store/App Store. PWAs have the advantage of no app store dependency; hybrid apps have the advantage of full device API access and store visibility. Some businesses use both — a PWA for web traffic and a thin native wrapper for store presence.
