PWA — Explained with Examples

A Progressive Web App (PWA) is a web application that uses modern capabilities to deliver an app-like experience with offline support.

PWAs use service workers (JavaScript files that run in the background) to enable offline functionality, push notifications, and background sync. A web app manifest (JSON file) defines how the app appears when installed on a device — icon, name, theme color, display mode (fullscreen/standalone). PWAs are installable, discoverable via search, and work on any platform with a modern browser.

Think of a PWA like a hybrid between a website and a native app. It starts as a website you visit (instant access, no install), but as you use it, it gains app-like superpowers: working offline, sending notifications, living on your home screen. It is like a caterpillar becoming a butterfly — it does not change what it fundamentally is (web tech), but gains new capabilities.

PWAs require HTTPS (for service worker security), a manifest file, and a service worker that caches critical resources.

// Service worker (sw.js)
const CACHE_NAME = 'my-pwa-cache-v1';
const ASSETS = [
    '/',
    '/index.html',
    '/styles.css',
    '/app.js',
    '/offline.html'
];

// Install: cache app shell
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(ASSETS))
            .then(() => self.skipWaiting())
    );
});

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

// Fetch: serve from cache, fallback to network
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(cached => cached || fetch(event.request))
            .catch(() => caches.match('/offline.html'))
    );
});

// manifest.json
{
    "name": "My PWA",
    "short_name": "PWA",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "icons": [{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }]
}

Major companies with PWAs include Twitter (X), Pinterest, Spotify, and Starbucks. PWAs typically see increased engagement, faster load times, and lower data usage.

SPA, Service Worker, Lazy Loading, DOM

Lazy Loading for PWAs