Mobile devices generate over 60% of all global web traffic. Yet many businesses continue to build bloated desktop sites and attempt to scale them down, resulting in frustrating mobile experiences. Progressive Web Apps (PWAs) bridge the gap between web and native mobile apps—delivering offline resilience, instant splash screens, push notifications, and home screen installation without the friction of app store downloads.

1. The Three Core Pillars of a PWA

  1. Secure Context (HTTPS): PWAs require HTTPS to prevent man-in-the-middle attacks and safeguard Service Worker cache operations.
  2. Web App Manifest (manifest.json): A JSON file defining application name, brand icons, theme colors, and display mode.
  3. Service Worker: A background JavaScript worker that intercepts network requests, manages client-side caching, and enables offline access.

2. Crafting the Web App Manifest

{
  "name": "umakantdev Solutions",
  "short_name": "umakantdev",
  "description": "Senior Full-Stack Developer Umakant Yadav - Custom PHP, Laravel, Flutter & SEO",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0a0a1a",
  "theme_color": "#4f46e5",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

3. Implementing the Service Worker with Stale-While-Revalidate Caching

The Stale-While-Revalidate pattern delivers instant page loads by serving cached content immediately while asynchronously fetching updated content from the network in the background:

// public/sw.js
const CACHE_NAME = 'umakantdev-v2.5';
const STATIC_ASSETS = [
    '/',
    '/css/style.min.css?v=2.7',
    '/js/main.min.js',
    '/favicon-192x192.png',
    '/favicon-512x512.png'
];

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS))
    );
    self.skipWaiting();
});

self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then((keys) => {
            return Promise.all(
                keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
            );
        })
    );
    self.clients.claim();
});

self.addEventListener('fetch', (event) => {
    if (event.request.method !== 'GET') return;

    event.respondWith(
        caches.open(CACHE_NAME).then((cache) => {
            return cache.match(event.request).then((cachedResponse) => {
                const fetchPromise = fetch(event.request).then((networkResponse) => {
                    if (networkResponse && networkResponse.status === 200) {
                        cache.put(event.request, networkResponse.clone());
                    }
                    return networkResponse;
                }).catch(() => cachedResponse);

                return cachedResponse || fetchPromise;
            });
        })
    );
});

4. Custom In-App Install Prompt Banner

Rather than letting browsers display generic install prompts, trigger a branded installation modal when users demonstrate high engagement:

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;
    // Show custom install button
    const installBtn = document.getElementById('pwaInstallBtn');
    if (installBtn) {
        installBtn.classList.remove('d-none');
        installBtn.addEventListener('click', async () => {
            installBtn.classList.add('d-none');
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            console.log(`User response to install prompt: ${outcome}`);
            deferredPrompt = null;
        });
    }
});

Summary

PWAs deliver the speed and responsiveness of native apps with the universal reach and discoverability of the open web. By combining mobile-first responsive design, manifest declarations, and Service Worker caching, you create an app-like experience that keeps users engaged regardless of network connectivity.