Progressive Web Apps: Ein nativer Eindruck aus dem Web

PWAs kombinieren die Reichweite des Webs mit den Fähigkeiten nativer Apps — Offline-Unterstützung, Push-Benachrichtigungen, Home-Screen-Installation. Google definiert einen neuen Standard.

Web vs. nativ: eine falsche Dichotomie¶

Die traditionelle Sichtweise stellt das Web gegen native Anwendungen. Das Web hat Reichweite (URLs, keine Installation), native Apps haben Fähigkeiten (Offline, Benachrichtigungen, Hardware-Zugriff). PWAs versprechen beides.

Google definiert PWAs als Webanwendungen, die:

• Zuverlässig sind — offline oder bei langsamer Verbindung funktionieren
• Schnell sind — sofortige Reaktion auf Interaktion
• Ansprechend sind — Push-Benachrichtigungen, Vollbild, Home-Screen-Icon

Service Workers: Die Grundlage von PWA¶

Ein Service Worker ist ein JavaScript-Proxy zwischen App und Netzwerk:

// sw.js - Service Worker
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/css/app.css',
        '/js/app.js',
        '/offline.html'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

Der Service Worker cached Assets bei der Installation und liefert sie aus dem Cache — die App funktioniert offline.

Web App Manifest und Installation¶

Das Web App Manifest ist eine JSON-Datei, die die Anwendung beschreibt:

{
  "name": "CORE Systems App",
  "short_name": "CORE",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#040c0f",
  "theme_color": "#00d4ff",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Chrome auf Android zeigt ein Add-to-Home-Screen-Banner — der Nutzer installiert die Webanwendung wie eine native App, ohne App Store.

Push-Benachrichtigungen und die Zukunft¶

Die Push API ermöglicht das Senden von Benachrichtigungen, auch wenn die App geschlossen ist — ein Schlüssel-Feature für Engagement.

Aktueller Unterstützungsstatus:

• Chrome/Android — volle PWA-Unterstützung
• Firefox — Service Workers und Push-Benachrichtigungen
• Safari/iOS — eingeschränkte Unterstützung (keine Push-Benachrichtigungen)
• Edge — in Arbeit

Safari ist das größte Hindernis für die breite PWA-Adoption. Apple hat ein wirtschaftliches Interesse daran, den App Store als einzigen Vertriebskanal zu erhalten.

Fazit: Die Zukunft der App-Distribution¶

PWAs haben das Potenzial, die Art und Weise zu ändern, wie Nutzer Anwendungen erhalten. Für Unternehmen bedeutet das eine Codebase, keine App-Store-Gebühren und sofortige Updates. Beobachten Sie die Safari-Unterstützung — das wird über den Erfolg von PWA entscheiden.