PWA (Progressive Web App) Implementation

Progressive Web App (PWA) Development

PWA is a web application with ability to install on device, offline work and native UX. Users can add site to home screen — it opens without address bar, with custom splash and icon.

Install criteria

For "Add to home screen" banner to appear, browser requires:

• HTTPS (mandatory)
• Registered Service Worker with fetch handler
• Correct Web App Manifest with icons, name, start_url, display
• User spent sufficient time on site

Web App Manifest

{
    "name": "TechnoStore — buy electronics",
    "short_name": "TechnoStore",
    "description": "Smartphones, laptops, accessories with delivery",
    "start_url": "/?source=pwa",
    "scope": "/",
    "display": "standalone",
    "orientation": "portrait-primary",
    "theme_color": "#1a73e8",
    "background_color": "#ffffff",
    "lang": "en",
    "dir": "ltr",
    "icons": [
        { "src": "/icons/icon-72.png",   "sizes": "72x72",   "type": "image/png" },
        { "src": "/icons/icon-96.png",   "sizes": "96x96",   "type": "image/png" },
        { "src": "/icons/icon-128.png",  "sizes": "128x128", "type": "image/png" },
        { "src": "/icons/icon-144.png",  "sizes": "144x144", "type": "image/png" },
        { "src": "/icons/icon-152.png",  "sizes": "152x152", "type": "image/png" },
        { "src": "/icons/icon-192.png",  "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
        { "src": "/icons/icon-384.png",  "sizes": "384x384", "type": "image/png" },
        { "src": "/icons/icon-512.png",  "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
    ],
    "screenshots": [
        {
            "src": "/screenshots/mobile-catalog.webp",
            "sizes": "390x844",
            "type": "image/webp",
            "form_factor": "narrow",
            "label": "Product catalog"
        }
    ],
    "shortcuts": [
        {
            "name": "Cart",
            "url": "/cart",
            "icons": [{ "src": "/icons/cart-96.png", "sizes": "96x96" }]
        },
        {
            "name": "Wishlist",
            "url": "/wishlist",
            "icons": [{ "src": "/icons/heart-96.png", "sizes": "96x96" }]
        }
    ],
    "share_target": {
        "action": "/share",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "title": "title",
            "text": "text",
            "url": "url"
        }
    }
}

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#1a73e8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="TechnoStore">
<link rel="apple-touch-icon" href="/icons/icon-192.png">

Service Worker for PWA

// sw.js — basic PWA strategy
const CACHE_VERSION = 'v3';
const APP_SHELL = [
    '/',
    '/manifest.json',
    '/offline.html',
    '/css/app.css',
    '/js/app.js',
    '/fonts/inter-regular.woff2',
    '/icons/icon-192.png',
];

// Install: cache App Shell
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(`shell-${CACHE_VERSION}`)
            .then(cache => cache.addAll(APP_SHELL))
            .then(() => self.skipWaiting())
    );
});

// Activate: remove old caches
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys()
            .then(keys => Promise.all(
                keys.filter(k => !k.endsWith(CACHE_VERSION))
                    .map(k => caches.delete(k))
            ))
            .then(() => self.clients.claim())
    );
});

// Fetch: different strategies for different resources
self.addEventListener('fetch', event => {
    const { request } = event;
    const url = new URL(request.url);

    // App Shell — cache first
    if (APP_SHELL.includes(url.pathname)) {
        event.respondWith(
            caches.match(request).then(r => r || fetch(request))
        );
        return;
    }

    // HTML pages — network first, fallback offline
    if (request.headers.get('Accept')?.includes('text/html')) {
        event.respondWith(
            fetch(request)
                .then(response => {
                    const clone = response.clone();
                    caches.open(`pages-${CACHE_VERSION}`)
                        .then(cache => cache.put(request, clone));
                    return response;
                })
                .catch(() => caches.match(request)
                    .then(cached => cached || caches.match('/offline.html'))
                )
        );
        return;
    }

    // Images — stale while revalidate
    if (request.destination === 'image') {
        event.respondWith(
            caches.open(`images-${CACHE_VERSION}`).then(async cache => {
                const cached = await cache.match(request);
                const fetchPromise = fetch(request).then(response => {
                    cache.put(request, response.clone());
                    return response;
                });
                return cached ?? fetchPromise;
            })
        );
    }
});

Install button (Install Prompt)

// useInstallPrompt.ts
export function useInstallPrompt() {
    const [installPrompt, setInstallPrompt] = useState<BeforeInstallPromptEvent | null>(null);
    const [isInstalled, setIsInstalled] = useState(false);

    useEffect(() => {
        const handler = (e: BeforeInstallPromptEvent) => {
            e.preventDefault();
            setInstallPrompt(e);
        };

        window.addEventListener('beforeinstallprompt', handler as EventListener);
        window.addEventListener('appinstalled', () => setIsInstalled(true));

        // Check — already installed?
        if (window.matchMedia('(display-mode: standalone)').matches) {
            setIsInstalled(true);
        }

        return () => window.removeEventListener('beforeinstallprompt', handler as EventListener);
    }, []);

    const install = async () => {
        if (!installPrompt) return;
        const result = await installPrompt.prompt();
        if (result.outcome === 'accepted') {
            setIsInstalled(true);
            setInstallPrompt(null);
        }
    };

    return { canInstall: !!installPrompt && !isInstalled, install, isInstalled };
}

// Usage in component
function InstallBanner() {
    const { canInstall, install } = useInstallPrompt();
    if (!canInstall) return null;

    return (
        <div className="install-banner">
            <p>Install app for quick access</p>
            <button onClick={install}>Install</button>
        </div>
    );
}

Offline page

<!-- /offline.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>No connection — TechnoStore</title>
    <style>
        body { font-family: system-ui; display: flex; align-items: center;
               justify-content: center; height: 100vh; margin: 0; }
        .offline { text-align: center; }
    </style>
</head>
<body>
    <div class="offline">
        <svg><!-- wifi off icon --></svg>
        <h1>No connection</h1>
        <p>Check internet and refresh page</p>
        <button onclick="location.reload()">Try again</button>
    </div>
</body>
</html>

PWA analytics

window.addEventListener('appinstalled', () => {
    gtag('event', 'pwa_installed', { event_category: 'PWA' });
});

// Traffic source from PWA
const isPWA = window.matchMedia('(display-mode: standalone)').matches;
if (isPWA) {
    gtag('set', { 'content_group': 'PWA' });
}

Lighthouse PWA audit

Lighthouse automatically checks installability. Goal: all PWA section checks green:

• Installable: manifest + SW + HTTPS
• PWA Optimized: meta viewport, theme, icons, offline

Development time: 2–4 days for full PWA with Service Worker, manifest and offline page.