Progressive Web Apps (PWAs) turn your website into an installable app, with offline support, push notifications, and no app store needed. All you need is a Web App Manifest, a Service Worker, and HTTPS.

Imagine building a website that suddenly behaves like a native app. Your users can install it on their home screen, it works offline, and it can even send push notifications. Sounds like a lot of work? It's not. Welcome to the world of Progressive Web Apps.

What Are Progressive Web Apps, Anyway? 🤔

A PWA is essentially a regular website with some extra superpowers. Google coined the term in 2015, but the idea behind it is simple: websites should feel like native apps.

The three pillars of a PWA are:

  • Reliable, It loads even with a poor or missing network connection
  • Fast, It responds quickly to user interactions
  • Engaging, It feels like a native app (installable, fullscreen, push notifications)

The best part: you don't need an app store, no separate codebases for iOS and Android, and no need to learn Swift or Kotlin. Your existing web skills are more than enough.

Progressive Web Apps
Capabilities that enable app experiences, built and deployed on the web.
web.dev

The Web App Manifest 📋

The manifest is a JSON file that tells the browser how your app should behave when installed. Here's a complete example:

{
  "name": "My Awesome PWA",
  "short_name": "AwesomePWA",
  "description": "A really cool Progressive Web App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196F3",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Include the manifest in your HTML:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#2196F3">

Here's what the key fields mean:

  • display: "standalone", The app runs without browser UI, so it feels like a real app
  • start_url, Which page loads when the app starts
  • icons, You need at least 192x192 and 512x512. The maskable icon ensures proper cropping on Android
  • theme_color, Colors the status bar on mobile devices

Service Worker, The Heart of It All 💙

The Service Worker is a JavaScript file that runs in the background, independent of your website. It sits as a proxy between the browser and the network, intercepting requests, caching them, and even responding when you're offline.

htmx: Interactive Websites Without JavaScript Frameworks 🔄
htmx bietet einen alternativen Ansatz für interaktive Webseiten – ganz ohne schwere JavaScript-Frameworks.
disane.dev

First, you need to register the Service Worker:

// In your main JS file
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('SW registered:', registration.scope);
    } catch (error) {
      console.log('SW registration failed:', error);
    }
  });
}

And here's the Service Worker itself with a cache-first strategy:

// sw.js
const CACHE_NAME = 'pwa-cache-v1';
const ASSETS_TO_CACHE = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/icons/icon-192x192.png',
  '/offline.html'
];

// Install event: pre-cache assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(ASSETS_TO_CACHE))
      .then(() => self.skipWaiting())
  );
});

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

// Fetch event: cache-first strategy
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((cachedResponse) => {
        if (cachedResponse) {
          return cachedResponse;
        }
        return fetch(event.request).then((response) => {
          // Only cache successful responses
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }
          const responseToCache = response.clone();
          caches.open(CACHE_NAME)
            .then((cache) => cache.put(event.request, responseToCache));
          return response;
        });
      })
      .catch(() => {
        // Offline fallback for navigation requests
        if (event.request.mode === 'navigate') {
          return caches.match('/offline.html');
        }
      })
  );
});

Offline Capability, The Killer Feature 🔌

Offline capability is what truly sets a PWA apart from a regular website. With the Service Worker above, you've already got the basics covered. But there are different caching strategies depending on your needs:

Strategy Description Good For
Cache First Check cache first, then network Static assets (CSS, JS, images)
Network First Try network first, fall back to cache API data, dynamic content
Stale While Revalidate Serve from cache, update in background Frequently updated content
Cache Only Only from cache Purely static content
Network Only Only from network Analytics, non-cacheable requests

A nice offline page is also quick to build. Just create an offline.html that gets cached during the install event, and show it as a fallback when navigation fails.

The Install Prompt 📲

When your PWA meets the criteria (manifest, Service Worker, HTTPS), the browser automatically shows an install prompt. But you can intercept the event and trigger it at a better time:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the automatic prompt
  e.preventDefault();
  deferredPrompt = e;

  // Show your own install button
  const installBtn = document.getElementById('install-button');
  installBtn.style.display = 'block';

  installBtn.addEventListener('click', async () => {
    installBtn.style.display = 'none';
    deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
    console.log(outcome === 'accepted' ? 'App installed!' : 'Installation dismissed');
    deferredPrompt = null;
  });
});

// Detect if the app is already installed
window.addEventListener('appinstalled', () => {
  console.log('PWA was installed');
  deferredPrompt = null;
});

Push Notifications 🔔

Push notifications are the feature that truly makes PWAs feel "app-like". Here's how the flow works:

  1. User grants notification permission
  2. Browser gives you a push subscription object
  3. Your server sends push messages through the push service
  4. The Service Worker receives and displays them
// Request permission and create subscription
async function subscribeToPush() {
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    console.log('Notification permission denied');
    return;
  }

  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array('YOUR_VAPID_PUBLIC_KEY')
  });

  // Send subscription to your server
  await fetch('/api/push/subscribe', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: { 'Content-Type': 'application/json' }
  });
}

// Helper: Base64 to Uint8Array
function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  const rawData = atob(base64);
  return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)));
}

And in the Service Worker, you receive the push message:

// In sw.js
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : {};
  const options = {
    body: data.body || 'New notification',
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    vibrate: [100, 50, 100],
    data: { url: data.url || '/' }
  };

  event.waitUntil(
    self.registration.showNotification(data.title || 'PWA Update', options)
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

PWA vs. Native App, When to Use What? ⚖️

The honest answer: it depends. Here's a guide:

PWA is the right choice when:

  • You want broad reach (anyone with a browser can use it)
  • Your budget is limited (one codebase for all platforms)
  • Fast iteration matters (no app store review process)
  • Your app primarily displays content
  • You need SEO (PWAs are indexable)

Native is better when:

  • You need deep hardware integration (Bluetooth, NFC, AR)
  • Maximum performance is required (games, video editing)
  • You rely on specific native APIs not available on the web
  • App Store presence is a must (though PWAs can now be listed there too)

Fun fact: Twitter Lite as a PWA increased engagement by 65% and reduced data usage by 70%. Starbucks' PWA is 99.84% smaller than their iOS app. These aren't toys.

Conclusion 🎯

PWAs are no longer just hype, they're a serious alternative to native apps for many use cases. With just a few lines of code, you can turn any website into an installable, offline-capable app. The web platform keeps getting more powerful, and the gap to native apps gets smaller every year.

CSS :has() – The Parent Selector Everyone's Been Waiting For 🎯
CSS :has() ist der lang ersehnte Parent-Selector, der komplett neue Möglichkeiten im Styling eröffnet.
disane.dev

My tip: start small. Add a manifest and a simple Service Worker to your next project. You'll be surprised how little effort it takes and how much you get in return.

Happy Coding! 🚀