Was ist eine PWA? Mobile App oder Web?

01Was bedeutet Progressive Web App?

Eine Progressive Web App ist ein Ansatz, der einer gewöhnlichen Website App-Fähigkeiten hinzufügt. Nutzer öffnen die Seite im Browser und legen sie bei Gefallen mit einem Fingertipp auf ihrem Startbildschirm ab. Bei den nächsten Aufrufen startet sie wie eine App, ohne Adressleiste, mit eigenem Symbol und Startbildschirm.

Das Wort »progressive« im Namen ist wichtig. Die Anwendung gewinnt so viele Fähigkeiten, wie der Browser unterstützt: In einem alten Browser funktioniert sie wie eine normale Website, in einem modernen kommen Offline-Modus, Benachrichtigungen und die Installation auf dem Startbildschirm hinzu. Niemand bleibt außen vor.

Die Grundlage dieses Ansatzes sind Webstandards; er ist weder an eine bestimmte Plattform noch an ein Framework gebunden. Jede Website, ob mit React, Vue oder reinem JavaScript geschrieben, lässt sich mit den richtigen Schritten in eine PWA verwandeln.

02Drei Bausteine machen eine Website zur PWA

Technisch braucht eine Website drei Grundkomponenten, um als PWA zu gelten. Alle drei sind Standards, und ihre offiziellen Beschreibungen finden sich in Quellen wie web.dev.

{
  "name": "Beispielshop",
  "short_name": "Shop",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0b5cff",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

HTTPS

PWA-Funktionen laufen nur über eine sichere Verbindung. Auf einer Website ohne SSL-Zertifikat kann kein Service Worker registriert werden.

Web-App-Manifest

Das Manifest ist eine kleine JSON-Datei, die Namen, Symbole, Themenfarbe der App und die Art ihres Starts beschreibt. Der Browser schlägt anhand dieser Datei das Hinzufügen zum Startbildschirm vor.

Service Worker

Der Service Worker ist eine JavaScript-Datei, die zwischen Browser und Netzwerk steht. Er legt Seiten und Dateien im Cache ab, zeigt bei Verbindungsabbruch gespeicherte Inhalte an und verwaltet auf geeigneten Plattformen Benachrichtigungen.

03Vorteile von PWAs

Der größte dieser Vorteile liegt häufig bei den Kosten. Statt zwei getrennter mobiler Apps, zwei Wartungsaufwänden und zwei Store-Prozessen verwalten Sie ein einziges Webprojekt. Das Budget bestimmen vor allem die Anzahl der Bildschirme, die Komplexität der Offline-Szenarien und die anzubindenden Systeme.

• Eine Codebasis: Getrennte Entwicklungen für iOS, Android und Desktop sind nicht nötig.
• Unabhängig von Stores: Für Updates warten Sie auf keine Freigabe; Änderungen erreichen sofort alle.
• Geringe Installationshürde: Nutzer starten direkt über einen Link, ohne in einen Store zu gehen.
• In Suchmaschinen sichtbar: Da der Inhalt eine Webseite ist, kann Google ihn crawlen.
• Leichtgewichtig: Auf dem Smartphone belegt sie in der Regel deutlich weniger Speicher als native Apps.
• Offline-fähig: Auch bei schwacher Verbindung werden Inhalte aus dem Cache geöffnet.

04Grenzen von PWAs

Eine PWA erfüllt nicht jeden Bedarf; für einen ehrlichen Vergleich muss man auch ihre Grenzen kennen.

Die iOS-Unterstützung ist eingeschränkter als bei Android. Funktionen wie das Hinzufügen zum Startbildschirm und Benachrichtigungen haben sich mit der Zeit verbessert, einige Verhaltensweisen unterscheiden sich aber noch, und der Installationsvorschlag erscheint nicht automatisch; Nutzer müssen die Seite über das Teilen-Menü hinzufügen.

Auch der Hardwarezugriff ist begrenzt. Grundfunktionen wie Kamera, Standort und Vibration lassen sich über das Web nutzen, bei Anforderungen wie Bluetooth-Geräten, dauerhafter Standortverfolgung im Hintergrund oder grafikintensiven Spielen liegt die native App aber weiterhin vorn.

Schließlich gibt es das Thema Sichtbarkeit im Store. Manche Nutzer suchen eine App nur im Store. Unter Android lassen sich PWAs mit bestimmten Methoden im Play Store listen; unter iOS erfordert dieser Weg in der Regel eine native Hüllen-App.

05Mobile App oder Website?

Diese Frage ist eigentlich eine Entscheidung zwischen drei Optionen: mobilfreundliche Website, PWA und native mobile App. Die folgende Tabelle fasst die Unterschiede zusammen.

06Für welche Unternehmen eignet sich eine PWA?

Am stärksten ist eine PWA in Szenarien, in denen Nutzer häufig zurückkehren, aber keine eigene App herunterladen möchten. Für Nutzer mit vollem Handyspeicher, die keine neue App installieren wollen, ist ein leichtes Erlebnis, das über einen Link startet und zum Startbildschirm hinzugefügt wird, oft der kürzeste Weg.

• Onlineshops: ein schnell ladender Shop auf dem Startbildschirm für wiederkehrende Kunden.
• Restaurants und Cafés: Menü- und Bestellbildschirme, die per QR-Code am Tisch aufgerufen und ohne App-Download genutzt werden.
• Reservierung und Terminbuchung: schnelle Wiederholungsbuchungen für Hotel, Praxis oder Friseursalon.
• Außendienstteams: Servicetechniker oder Vertriebsteams, die an Orten mit schwacher Verbindung Formulare ausfüllen.
• Content-Websites: häufig gelesene Inhalte wie Nachrichten, Ratgeber und Kataloge.

07Was bestimmt die Kosten?

Das Budget eines PWA-Projekts richtet sich weniger nach der Frage »App oder Website« als nach den Details des Umfangs. Es ist ein großer Unterschied, ob man einer einfachen Content-Website Manifest und Cache hinzufügt oder eine Außendienst-App baut, die offline Bestellungen entgegennimmt.

Die Budgetposten mit dem größten Einfluss sind: Anzahl der Bildschirme und Abläufe, Komplexität der Vorgänge, die offline laufen sollen, Benachrichtigungsszenarien, anzubindende Systeme wie Zahlung, Lager oder Reservierung und der Grad der Individualität des Designs. Hinzu kommt der Bedarf an Wartung und Updates nach dem Livegang.

Betrachten Sie beim Vergleich mit einer nativen App nicht nur die anfänglichen Entwicklungskosten. Versionspflege für zwei Plattformen, Store-Updates und Gerätetests sind jedes Jahr wiederkehrende Posten. Bei einer PWA bündelt sich ein großer Teil davon in einem einzigen Webprozess; hier entsteht die eigentliche Ersparnis meist.

08Bevor Sie ein PWA-Projekt starten

Der Code einer PWA wird überwiegend in JavaScript geschrieben; bei großen Projekten wird für die Typsicherheit TypeScript bevorzugt. Wenn Sie die Aufgabenteilung zwischen Oberfläche und Server interessiert, erklärt unser Beitrag zum Unterschied zwischen Frontend und Backend das Thema verständlich. Wer ganz von vorn beginnen möchte, findet im Beitrag Was ist JavaScript einen guten Einstieg.

1. Mobile Nutzung optimieren: Eine schnelle, gut lesbare und touchfreundliche Website ist die Grundvoraussetzung.
2. Ein Geschwindigkeitsziel setzen: Die Core-Web-Vitals-Schwellen (LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1) sind ein guter Ausgangswert.
3. Das Offline-Szenario definieren: Was soll der Nutzer ohne Internet sehen und tun können?
4. Die Benachrichtigungsstrategie festlegen: Fragen Sie nicht in der ersten Sekunde nach der Erlaubnis, sondern erst, nachdem Sie Mehrwert gezeigt haben.
5. Auf echten Geräten testen: Probieren Sie Installation und Startverhalten besonders unter iOS und Android getrennt aus.