PWA vs. Native Apps: Wann reicht eine Progressive Web App?

“Bauen Sie doch eine PWA - spart 50% Kosten!” Hören Sie oft. Stimmt - aber nur, wenn Ihre App kein GPS, NFC oder Push-Notifications braucht.

Als Software-Architektin zeige ich Ihnen die ehrliche Wahrheit über PWAs: Wann sie ausreichen (Business-Tools, CRM), wann nicht (Hardware, Performance), und wo die kritischen iOS-Limitationen liegen.

🔔 WICHTIG: Alle Preise verstehen sich netto (zzgl. 19% USt.). DE-Sätze; Offshore/NE-EU abweichend.

---

Was sind Progressive Web Apps (PWA)?

PWA = Web-App mit App-Feeling (installierbar, offline-fähig, Push-Notifications).

PWA vs. normale Website

Normale Website:

• Läuft nur im Browser-Tab
• Kein App-Icon auf Homescreen
• Nicht offline-fähig
• Keine Push-Notifications

Progressive Web App:

• ✅ Installierbar (App-Icon auf Homescreen, ohne App Store)
• ✅ Offline-fähig (Service Workers cachen Daten)
• ✅ Push-Notifications (⚠️ iOS-Limitationen!)
• ✅ App-ähnliches UI (Fullscreen, keine Browser-URL-Leiste)
• ✅ Auto-Updates (User lädt keine Updates aus Store)

Technische Grundlagen

PWA = Website + 3 Technologien:

// 1. Service Worker (Offline + Push)
navigator.serviceWorker.register('/sw.js');

// 2. Web App Manifest (Installierbar)
{
  "name": "Meine App",
  "start_url": "/",
  "display": "standalone",
  "icons": [...]
}

// 3. HTTPS (Pflicht für Service Workers)
https://ihre-app.de

Fazit: PWA = verbesserte Website, KEINE native App.

---

PWA vs. Native: Der große Vergleich

Umfassende Vergleichstabelle

Kriterium	PWA	Native App (iOS/Android)	Flutter (Cross-Platform)
Entwicklung	HTML/CSS/JS	Swift/Kotlin (2× Code)	Dart (1× Code)
Kosten Entwicklung	15.000-40.000 €	35.000-80.000 €	20.000-50.000 €
Timeline	2-4 Monate	4-8 Monate	3-5 Monate
Distribution	Browser-Link	App Store Submit	App Store Submit
Installation	1-Click (Add-to-Home)	Store-Download	Store-Download
Updates	Instant (kein User-Action)	Store-Approval (1-3 Tage)	Store-Approval
Offline-Fähigkeit	✅ Service Workers	✅ SQLite	✅ SQLite
Hardware-Zugriff	⚠️ Eingeschränkt	✅ Voll	✅ Voll
Performance	⚠️ Langsamer (JS)	✅ Native Speed	✅ Native Speed
SEO	✅ Indexierbar	❌ Nicht indexierbar	❌ Nicht indexierbar
App Store Sichtbarkeit	❌ Keine	✅ Ja	✅ Ja
Push-Notifications	⚠️ iOS: seit iOS 16.4	✅ Voll	✅ Voll
Biometrische Auth	⚠️ WebAuthn (eingeschränkt)	✅ Face ID/Touch ID	✅ Face ID/Touch ID

Legende:

• ✅ Voll unterstützt
• ⚠️ Eingeschränkt (Limitationen beachten)
• ❌ Nicht möglich

---

Hardware-Zugriff: Der kritische Unterschied

DAS ist der Deal-Breaker: PWAs haben eingeschränkten Hardware-Zugriff.

Hardware-Vergleich: PWA vs. Native

Hardware	PWA (Browser)	Native App	Kommentar
GPS/Location	✅ Ja	✅ Ja	PWA: Geolocation API funktioniert
Kamera	✅ Ja	✅ Ja	PWA: getUserMedia API
Barcode-Scanner	⚠️ Teilweise	✅ Ja	PWA: Barcode Detection API (Chrome/Edge only, iOS nicht)
NFC	❌ iOS Nein, ⚠️ Android teilweise	✅ Ja	PWA: Web NFC (nur Chrome Android, iOS nicht)
Bluetooth	⚠️ Web Bluetooth	✅ Ja	PWA: Chrome/Edge only, iOS 16.4+ eingeschränkt
Biometrie	⚠️ WebAuthn	✅ Face ID/Touch ID	PWA: Keine native Biometrie, nur WebAuthn
Push-Notifications	⚠️ iOS seit 16.4	✅ Ja	PWA: iOS 16.4+, aber keine Background-Delivery
Background Sync	❌ iOS Nein	✅ Ja	PWA: iOS unterstützt kein Background Sync
Kontakte/Kalender	❌ Nein	✅ Ja	PWA: Kein Zugriff auf Kontakte/Kalender
Dateisystem	⚠️ File System Access API	✅ Voll	PWA: Chrome only, iOS nicht
Sensoren	⚠️ Generic Sensor API	✅ Voll	PWA: Gyro/Accel eingeschränkt

Fazit:

• ✅ PWA okay für: GPS, Kamera, Mikrofon
• ❌ PWA nicht okay für: NFC (iOS), Barcode (iOS), Biometrie, Kontakte, Background Sync

---

Wann reicht eine PWA?

✅ PWA ist die richtige Wahl:

Use Cases:

• Business-Tools ohne Hardware: CRM, Ticketing, Projektmanagement
• Content-lastig: News-Apps, Blogs, Dokumentationen
• E-Commerce: Online-Shops (kein Barcode-Scan nötig)
• Dashboards: Analytics, Reporting, Admin-Panels
• Formulare: Datenerfassung ohne Hardware
• Prototypen: MVP schnell testen (später zu Native upgraden)

Beispiele:

• Twitter Lite: PWA statt Native (60% schneller)
• Starbucks PWA: Bestellung + Menü (keine Hardware nötig)
• Trivago PWA: Hotel-Suche (nur GPS, kein NFC/Barcode)

Entscheidungskriterien:

• ✅ User braucht keine spezielle Hardware (NFC, Barcode, Biometrie)
• ✅ Performance-Anforderungen moderat (keine 3D-Games)
• ✅ Budget knapp (15-40k statt 35-80k)
• ✅ Schneller Launch wichtig (2-4 Monate statt 4-8)
• ✅ SEO wichtig (PWA indexierbar, Native nicht)
• ✅ Keine App Store Politik (In-App-Käufe, Review-Prozess)

---

Wann ist Native Pflicht?

❌ PWA reicht NICHT:

Use Cases:

• Hardware-intensiv: NFC-Check-in, Barcode-Scanner, Biometrie
• Performance-kritisch: 3D-Games, Video-Editing, AR/VR
• Background-Tasks: GPS-Tracking, Push-Sync, Fitness-Tracking
• Sensible Daten: Banking (Biometrie-Login Pflicht)
• Offline-First mit Write: SQLite-basierte Sync-Apps
• App Store Sichtbarkeit: Wichtig für Discovery

Beispiele:

• Wächterkontrollsystem: NFC/QR + GPS-Tracking → Native Pflicht
• Inventur-Scanner: Barcode/RFID + Offline-SQLite → Native Pflicht
• Banking-Apps: Face ID/Touch ID + TLS-Pinning → Native Pflicht
• Fitness-Tracker: Background-GPS + Health-Kit → Native Pflicht

Entscheidungskriterien:

• ❌ NFC/Barcode auf iOS nötig → Native Pflicht
• ❌ Background-Sync nötig (iOS) → Native Pflicht
• ❌ Biometrische Auth (Face ID) → Native Pflicht
• ❌ Performance-kritisch (60fps, 3D) → Native Pflicht
• ❌ Kontakte/Kalender-Zugriff → Native Pflicht
• ❌ App Store Discovery wichtig → Native Pflicht

---

Use-Case-Tabelle: PWA vs. Flutter vs. Native

Schnell-Entscheidung nach Use Case

Use Case	PWA	Flutter	Native	Empfehlung	Grund
CRM/Ticketing	✅	✅	✅	PWA	Kein Hardware, SEO-Vorteil, günstig
E-Commerce	✅	✅	✅	PWA	SEO wichtig, kein Hardware, schneller Launch
Content/News	✅	✅	✅	PWA	SEO Pflicht, kein Hardware
Dashboard/Analytics	✅	✅	✅	PWA	Kein Hardware, Browser-Zugriff oft genug
Inventur (Barcode iOS)	❌	✅	✅	Flutter/Native	Barcode Detection API fehlt iOS
NFC Check-in (iOS)	❌	✅	✅	Flutter/Native	Web NFC fehlt iOS
Banking/Finance	⚠️	✅	✅	Native	Biometrie (Face ID) + Pinning + Keychain
Fitness-Tracker	⚠️	✅	✅	Native	Background GPS + HealthKit
3D-Game	❌	⚠️	✅	Native	Performance + Metal/Vulkan
Video-Editing	❌	⚠️	✅	Native	Performance-kritisch
Messaging/Chat	✅	✅	✅	Flutter	Push-Notifications (iOS 16.4+), Cross-Platform
Social Media	✅	✅	✅	Flutter	Push + Performance + Cross-Platform
Booking/Reservierung	✅	✅	✅	PWA/Flutter	Kein Hardware, SEO-Vorteil (PWA)

Legende:

• ✅ Technisch möglich (aber nicht unbedingt optimal)
• ⚠️ Eingeschränkt möglich (mit Workarounds, nicht empfohlen)
• ❌ Nicht möglich (technische Limitationen)

---

Real Cases: PWA vs. Native Entscheidungen

Case: CRM-Tool für Vertriebsteam

Anforderung:

• Kundendaten verwalten (Kontakte, Notizen, Termine)
• Offline-Zugriff (gecachte Daten)
• GPS für Check-In bei Kundenbesuchen
• Push-Notifications für Termine

Entscheidung: PWA ✅

Begründung:

• ✅ GPS funktioniert in PWA
• ✅ Offline-Capable mit Service Workers ausreichend (Read-Only Cache)
• ✅ Push-Notifications (iOS 16.4+)
• ✅ Keine Hardware (NFC/Barcode) nötig
• ✅ Budget: 22.000 € PWA vs. 55.000 € Native

Technische Umsetzung:

• React + PWA-Manifest
• Service Workers für Offline-Cache
• IndexedDB für lokale Daten
• Push-Notifications API

Kosten: 22.000 € (Timeline: 3 Monate)

---

Case: Inventur-Scanner mit Barcode

Anforderung:

• Barcode-Scanner (1000+ Artikel)
• Offline-First (Lagerhalle ohne Netz)
• SQLite-basierte Sync
• Batch-Upload

Entscheidung: Native (Flutter) ✅

Begründung:

• ❌ Barcode Detection API funktioniert nicht auf iOS in PWA
• ❌ Offline-First mit Write-Operations (SQLite nötig)
• ❌ Performance: 1000+ Scans → Native schneller
• ✅ Flutter: 1× Code für iOS + Android

Technische Umsetzung:

• Flutter + mobile_scanner Package
• SQLite für lokale DB
• Sync-Strategie: Last-Write-Wins

Kosten App-Entwicklung: 38.000 € Flutter-App (Frontend + Basic Backend für Sync)

Hinweis: Vollständige Enterprise-Lösung mit Backend-Infrastruktur + Monitoring + Skalierung: 72.000 € (siehe Offline-Apps Artikel)

Alternative PWA: Nicht möglich (Barcode Detection API fehlt auf iOS)

---

Case: Mensa-Check-in mit NFC

Anforderung:

• NFC-Karten-Check-in
• Offline-Suche (2000+ Studenten)
• Ampel-Status (Master-Slave-Setup)
• Background-Sync

Entscheidung: Native (Flutter) ✅

Begründung:

• ❌ Web NFC funktioniert nicht auf iOS
• ❌ Background Sync funktioniert nicht auf iOS in PWA
• ✅ Flutter: nfc_manager Package

Kosten: 45.000 € Flutter (Timeline: 4 Monate)

Alternative PWA: Nicht möglich (NFC auf iOS fehlt)

---

Kosten-Vergleich: PWA vs. Native vs. Flutter

Entwicklungskosten

App-Typ	PWA	Flutter	Native (iOS + Android)
Simple MVP (3-5 Screens)	15.000-25.000 €	20.000-35.000 €	35.000-60.000 €
Standard Business-App (5-10 Features)	25.000-45.000 €	40.000-70.000 €	70.000-120.000 €
Komplexe App (Hardware, Offline)	⚠️ Nicht möglich	60.000-100.000 €	100.000-180.000 €

Wartungskosten (pro Jahr)

	PWA	Flutter	Native
Bugfixes + Updates	3.000-8.000 €	5.000-12.000 €	8.000-18.000 €
OS-Updates	✅ Minimal (Browser-Updates)	⚠️ Flutter-Updates	❌ iOS/Android-Updates
Store-Gebühren	0 €	99 USD (iOS) + 25 USD (Android)	99 USD (iOS) + 25 USD (Android)

Gesamt-TCO (3 Jahre)

Beispiel: Standard Business-App (5-10 Features)

	PWA	Flutter	Native
Entwicklung	30.000 €	50.000 €	90.000 €
Wartung 3 Jahre	18.000 €	30.000 €	45.000 €
Store-Gebühren 3 Jahre	0 €	372 €	372 €
GESAMT	48.000 €	80.372 €	135.372 €

Hinweis: Kosten variieren je nach Komplexität. PWA-Budget 30k entspricht mittlerem Komplexitätsgrad (siehe Entwicklungskosten-Tabelle oben: PWA 25-45k für Standard Business-App).

Faustformel:

• PWA = 50-60% günstiger als Native (aber Hardware-Limitationen)
• Flutter = 30-40% günstiger als Native (voller Hardware-Zugriff)

---

iOS-Limitationen: Was PWAs auf iOS NICHT können

WICHTIG: iOS Safari hat massive Einschränkungen für PWAs.

iOS PWA-Limitationen (Stand iOS 17)

Feature	Android PWA	iOS PWA	Kommentar
Background Sync	✅ Ja	❌ Nein	User muss App öffnen zum Syncen
Background Fetch	✅ Ja	❌ Nein	Keine Auto-Updates im Background
Push-Notifications	✅ Seit Jahren	⚠️ Seit iOS 16.4	Keine Background-Delivery, nur beim App-Open
Barcode Detection	⚠️ Chrome only	❌ Nein	getUserMedia funktioniert, aber keine Barcode-API
Web NFC	✅ Chrome only	❌ Nein	NFC komplett nicht verfügbar
Web Bluetooth	✅ Chrome	⚠️ iOS 16.4+ eingeschränkt	Nur bestimmte Bluetooth-Profile
File System Access	✅ Chrome	❌ Nein	Kein Zugriff auf Dateisystem
Storage-Limits	~60% disk space	1-10 GB (streng)	iOS löscht Daten aggressiver

Wichtige iOS-Präzisierungen

Push-Notifications: Keine true Background-Delivery

• iOS 16.4+ unterstützt PWA-Push-Notifications
• ABER: Nur mit Safari-User-Opt-In (Permission-Dialog)
• KRITISCH: Keine true Background-Delivery → Benachrichtigungen kommen nur bei aktivem/rezentem App-Kontext
• Im Vergleich: Native Push = 95% Delivery, PWA iOS = ~60-70% Delivery

Barcode auf iOS: JS-Decoder sind keine Lösung

• Barcode Detection API fehlt komplett auf iOS Safari
• Workaround: getUserMedia + JS-Decoder (z.B. ZXing, QuaggaJS)
• ABER: Langsam, unkonstant, nicht gleichwertig zu nativen Scannern (MLKit/AVFoundation)
• Performance: Native Barcode: <100ms, JS-Decoder: 300-800ms + häufige Fehler

Biometrie: WebAuthn ≠ systemweite Face ID/Touch ID

• WebAuthn vorhanden, aber kein systemweiter Biometrie-Flow
• UX und Wiedererkennung stark eingeschränkt
• Banking-Niveau: WebAuthn reicht nicht → Native Face ID/Touch ID Pflicht

IndexedDB Eviction: Safari löscht Daten ohne Vorwarnung

• Safari hat aggressive Eviction-Policies
• Speicher kann ohne User-Warnung gelöscht werden (nach 7 Tagen Inaktivität möglich)
• Business-kritische Offline-Daten: IndexedDB nicht sicher → SQLite (Native/Flutter) Pflicht

Security-Differenzierung

• Certificate-Pinning: PWA nicht möglich, Native ja
• Keychain/KeyStore: PWA kein Zugriff, Native voll
• Bei sensiblen Daten (Banking/Health): Native/Flutter Pflicht

Fazit: Wenn Ihre Zielgruppe hauptsächlich iOS nutzt → PWA kritisch prüfen.

---

Performance: Wann ist PWA zu langsam?

Performance-Vergleich

Benchmark (gleiche App, iPhone 13):

Operation	PWA (React)	Flutter	Native (Swift)
App-Start (Cold)	1.8s	0.8s	0.6s
Scroll-Performance	~45fps	~58fps	~60fps
Liste (1000 Items)	800ms	200ms	150ms
DB-Query (SQLite)	⚠️ IndexedDB 120ms	30ms	25ms
Kamera-Zugriff	600ms	200ms	150ms
Memory-Footprint	80 MB	45 MB	35 MB

Hinweis: Benchmark auf iPhone 13. Auf Low-End-Geräten (iPhone SE, Android <4 GB RAM) ist PWA 3-5× langsamer als Native.

Fazit:

• PWA = 2-3× langsamer als Native (iPhone 13)
• PWA = 3-5× langsamer auf Low-End-Geräten
• Flutter = ~90% Native-Performance
• PWA okay für Business-Tools (nicht performance-kritisch)
• PWA nicht okay für Games, Video-Editing, AR

Wann Performance zum Problem wird

❌ PWA zu langsam:

• Scroll-Listen mit 500+ Items (Lag)
• Video/Bild-Bearbeitung (JS zu langsam)
• 3D/AR/VR (WebGL vs. Metal/Vulkan)
• Realtime-Collaboration (WebSocket-Overhead)

✅ PWA schnell genug:

• Formulare, Dashboards
• Text-basierte Apps (CRM, Ticketing)
• E-Commerce (Produktlisten <100 Items)
• Content-Apps (News, Blogs)

---

Installation & Distribution

App Store vs. Browser-Install

Native App (App Store):

Vorteile:

• ✅ Sichtbarkeit: App Store Discovery
• ✅ Vertrauen: User kennen App Stores
• ✅ Monetarisierung: In-App-Käufe (⚠️ 30% Apple-Tax)
• ✅ Reviews: Social Proof

Nachteile:

• ❌ Approval: 1-3 Tage Review (kann abgelehnt werden)
• ❌ Store-Gebühren: 99 USD/Jahr (iOS) + 25 USD (Android)
• ❌ Updates: User muss manuell updaten (oder Auto-Update aktiviert)

PWA (Browser-Install):

Vorteile:

• ✅ Instant-Deploy: Kein Approval-Prozess
• ✅ Auto-Updates: User bekommt immer neuste Version
• ✅ Keine Store-Gebühren: 0 €
• ✅ SEO: Indexierbar (Google findet App)

Nachteile:

• ❌ Keine Store-Sichtbarkeit: Kein Discovery-Kanal
• ❌ Erklärungsbedarf: “Bitte zu Homescreen hinzufügen”
• ❌ Vertrauen: User skeptisch (keine Store-Verifizierung)

PWA-Installation: How it works

iOS (Safari):

1. User öffnet Website (HTTPS)
2. Safari zeigt "Zu Homescreen"-Banner (oder User tippt Share-Button)
3. User wählt "Zum Home-Bildschirm"
4. App-Icon erscheint auf Homescreen
5. Beim Öffnen: Fullscreen ohne Browser-UI

Android (Chrome):

1. User öffnet Website (HTTPS)
2. Chrome zeigt automatisch "App installieren"-Banner
3. User tippt "Installieren"
4. App erscheint in App-Drawer + Homescreen

Conversion-Rate:

• iOS: ~5-10% (User muss manuell “Zu Homescreen” wählen)
• Android: ~15-25% (automatisches Banner)

Tipp: Onboarding-Screen mit Install-Anleitung (erhöht Conversion auf ~30%)

---

Decision Tree: PWA oder Native?

Entscheidungsbaum

Schritt 1: Hardware-Check

Braucht Ihre App NFC, Barcode (iOS), Biometrie, oder Kontakte/Kalender?
├─ Ja → NATIVE PFLICHT ✅
└─ Nein → Weiter zu Schritt 2

Schritt 2: Performance-Check

Ist Ihre App performance-kritisch (3D, Video, Realtime)?
├─ Ja → NATIVE EMPFOHLEN ✅
└─ Nein → Weiter zu Schritt 3

Schritt 3: Offline-Check

Braucht Ihre App Offline-First mit Write-Operations (SQLite)?
├─ Ja → NATIVE EMPFOHLEN ✅ (SQLite > IndexedDB)
└─ Nein → Weiter zu Schritt 4

Schritt 4: iOS-Anteil Check

Sind >70% Ihrer User auf iOS?
├─ Ja → NATIVE EMPFOHLEN ✅ (iOS PWA-Limitationen)
└─ Nein → PWA OKAY ⚠️

Schritt 5: Budget-Check

Budget <40k und kein Hardware nötig?
├─ Ja → PWA ✅
└─ Nein → FLUTTER (Cross-Platform) ✅

Quick-Check-Tabelle

Kriterium	PWA	Flutter	Native
Kein Hardware (NFC/Barcode)	✅	✅	✅
Budget <40k	✅	⚠️	❌
Schneller Launch (<4 Monate)	✅	⚠️	❌
Hardware-Zugriff (NFC/Barcode iOS)	❌	✅	✅
Performance-kritisch	❌	✅	✅
Offline-First mit SQLite	⚠️	✅	✅
App Store Sichtbarkeit	❌	✅	✅
iOS Background-Sync	❌	✅	✅

---

Progressive Enhancement: Von PWA zu Native

Strategie: Starten Sie mit PWA, upgraden Sie später zu Native (wenn nötig).

Phase 1: PWA MVP (2-3 Monate)

Budget: 20.000-30.000 €

Features:

• Core-Features ohne Hardware
• Service Workers für Offline-Cache
• Basic Push-Notifications
• Installierbar

Ziel: Validierung (Brauchen User die App wirklich?)

---

Phase 2: Native Upgrade (3-4 Monate)

Budget: +30.000-50.000 €

Was hinzukommt:

• Hardware-Zugriff (NFC, Barcode, Biometrie)
• SQLite für Offline-First
• Native Performance
• App Store Submission

Technischer Ansatz:

Option A: PWA-Code wiederverwenden

• React Native (wenn PWA mit React gebaut)
• ~60-70% Code-Reuse möglich
• +30.000-40.000 € für Native-Wrapper

Option B: Komplett neu mit Flutter

• Keine Code-Reuse (aber bessere Performance)
• +40.000-60.000 € für komplette Native-App

Empfehlung: Flutter (sauberer, performanter, keine React Native-Bugs)

Code-Reuse-Hinweis: React PWA → React Native 60-70% Reuse nur, wenn Architektur/State-Mgmt library-kompatibel (z.B. React Navigation statt reiner Router, keine Browser-only APIs wie localStorage direkt im Business-Logic).

---

Hybrid-Ansätze: Capacitor & Ionic

Was ist Capacitor?

Capacitor = PWA-Code + Native-Plugins (Best of both Worlds?)

Capacitor/Ionic: PWA + Native-Features

Prinzip:

• PWA-Code (HTML/CSS/JS)
• Native-Plugins für Hardware (Barcode, NFC, Biometrie)
• App Store-Submit möglich

Vorteile:

• ✅ Hardware-Zugriff: Barcode, NFC, Biometrie via Plugins
• ✅ App Store: Kann in App Store submitted werden
• ✅ Code-Reuse: 80-90% PWA-Code wiederverwendbar

Nachteile:

• ❌ Performance-Overhead: WebView-Layer langsamer als Native
• ❌ Komplexität: Bridge zwischen JS und Native
• ❌ Plugin-Abhängigkeit: Nicht alle Features verfügbar
• ❌ App Store Review: Hybrid-Apps werden kritischer geprüft

Kosten:

• PWA → Capacitor: +30-40% Entwicklungskosten (Plugins + Native-Wrapper)
• Beispiel: PWA 30k + Capacitor 12k = 42k Gesamt

Use Case: Wenn PWA fast ausreicht, aber 1-2 Hardware-Features fehlen (z.B. Barcode-Scan).

Empfehlung: Nur als “Rescue-Option” → Wenn möglich direkt Flutter (sauberer, performanter).

---

Trusted Web Activities (TWA) - Android-Only

Was ist TWA?

TWA = PWA direkt im Google Play Store (ohne Wrapper, Android-Only)

TWA: Play Store ohne Wrapper

Prinzip:

• Google verifiziert Domain-Ownership
• PWA läuft in Chrome Custom Tab (nicht WebView)
• Direkter Play Store-Submit
• NUR Android (iOS nicht unterstützt)

Vorteile:

• ✅ Play Store Sichtbarkeit (Discovery-Kanal)
• ✅ Kein Wrapper-Review-Problem (Google verifiziert Domain)
• ✅ PWA-Updates (Auto-Update via Web)
• ✅ Günstiger als Native/Flutter

Nachteile:

• ❌ iOS nicht unterstützt (nur Android)
• ❌ Kein voller Hardware-Zugriff (PWA-Limitationen bleiben)
• ❌ Domain-Verifizierung (assetlinks.json nötig)

Use Case: Android-Zielgruppe + PWA-Funktionalität ausreichend + Play Store-Sichtbarkeit gewünscht

Kosten: +500-1.500 € (TWA-Setup + assetlinks.json)

---

WebAssembly (WASM) - Performance-Boost für PWAs

Was ist WebAssembly?

WASM = C++/Rust-Code im Browser (fast Native-Speed)

WASM: Wenn PWA zu langsam ist

Prinzip:

• Performance-kritische Teile in C++/Rust schreiben
• Zu WASM kompilieren
• Im Browser ausführen (fast Native-Speed)

Performance:

• JavaScript: ~2-3× langsamer als Native
• WebAssembly: ~80-90% Native-Speed

Use Cases:

• 3D-Grafik (CAD, Games)
• Video-Encoding
• Bildbearbeitung (Photoshop-Level)
• Wissenschaftliche Berechnungen

Nachteile:

• ❌ Komplex: C++/Rust-Kenntnisse nötig
• ❌ Overhead: WASM-Module sind größer (Download-Zeit)
• ❌ DOM-Zugriff langsam: WASM → JS Bridge

Kosten: +30-50% für WASM-Optimierung (C++/Rust-Entwickler nötig)

Empfehlung: Nur bei echten Performance-Bottlenecks → Sonst Native/Flutter einfacher.

---

Browser-Kompatibilität: Nicht überall gleich

Problem: PWAs funktionieren nicht in allen Browsern gleich.

Browser-Support-Tabelle

Feature	Chrome/Edge	Safari iOS	Firefox	Samsung Internet
Service Workers	✅	✅	✅	✅
Web App Manifest	✅	✅	✅	✅
Push-Notifications	✅	⚠️ iOS 16.4+	✅	✅
Background Sync	✅	❌	✅	✅
Barcode Detection	✅	❌	❌	⚠️
Web NFC	✅	❌	❌	⚠️
File System Access	✅	❌	⚠️	⚠️
IndexedDB	✅	✅ (Limits)	✅	✅

Fazit:

• Chrome/Edge: Volle PWA-Unterstützung ✅
• Safari iOS: Eingeschränkt (siehe iOS-Limitationen) ⚠️
• Firefox: Volle Unterstützung (außer einige experimental APIs) ✅
• Samsung Internet: Meist volle Unterstützung ✅

Testing-Regel: Immer auf Safari iOS testen (restriktivster Browser).

---

App-Größe-Vergleich: PWA vs. Native

Vorteil PWA: Kein Download → Instant-Start

Download-Größen

App-Typ	Initial-Download	Nach Installation	User-Wahrnehmung
PWA	~2-5 MB (Initial-Load)	Progressive Caching	✅ Instant-Start
Flutter	~10-20 MB	Komplett	⚠️ 10-30s Wartezeit
Native	~15-30 MB	Komplett	⚠️ 15-45s Wartezeit

PWA-Vorteil:

• User installiert sofort (kein “Lade-Balken”)
• Progressive Loading (wichtigste Screens zuerst)
• Updates im Hintergrund (User merkt nichts)

Native-Vorteil:

• Nach Install: Offline voll funktionsfähig
• Kein Initial-Load beim ersten Start

Empfehlung: Bei langsamer Internet-Verbindung (3G) → PWA deutlich schneller installiert.

---

SEO-Vorteil: PWAs werden indexiert

WICHTIG: Google indexiert PWAs → Organischer Traffic möglich.

SEO: PWA vs. Native

PWA-Vorteile:

• ✅ Google indexiert PWA (wie normale Website)
• ✅ Organischer Traffic (30-50% bei E-Commerce PWAs)
• ✅ Meta-Tags (Title, Description, OG-Tags)
• ✅ Structured Data (Schema.org)
• ✅ Mobile-First Indexing (PWA perfekt dafür)

Native-Nachteile:

• ❌ Nicht indexierbar (nur App Store-Seite indexiert)
• ❌ Kein organischer Traffic (nur Store-Discovery)
• ❌ App Store Optimization (ASO) ≠ SEO

Real Data (E-Commerce PWA):

• Vor PWA: 100% Traffic via Ads/Direct
• Nach PWA: 35% organischer Traffic via Google
• ROI: SEO-Traffic kostet 0 €, Ads-Traffic 2-5 € pro Click

Use Cases wo SEO kritisch:

• E-Commerce (Produktseiten indexieren)
• Content-Apps (News, Blogs indexieren)
• Booking-Plattformen (Hotels, Flüge indexieren)

Empfehlung: Bei SEO-wichtigen Apps → PWA klar überlegen (oder PWA + Native-Wrapper).

---

PWA-Frameworks: Entwicklung vereinfachen

Problem: PWA von Grund auf komplex (Service Workers, Manifest, Caching-Strategien).

PWA-Frameworks (vereinfachen Entwicklung)

Workbox (Google)

• Service-Worker-Library
• Vordefinierte Caching-Strategien
• Background Sync Helpers
• Kosten: Kostenlos (Open Source)

Next.js (React + PWA)

• React-Framework mit PWA-Support out-of-the-box
• Automatische Service Worker Generation
• Static-Site-Generation (SSG) + Server-Side-Rendering (SSR)
• Kosten: Kostenlos (Open Source)

SvelteKit (Svelte + PWA)

• Svelte-Framework mit PWA-Adapter
• Kleiner Bundle-Size als React
• Schnelle Performance
• Kosten: Kostenlos (Open Source)

Vue + Vite PWA Plugin

• Vue-Framework mit PWA-Plugin
• Automatische Manifest-Generation
• Dev-Server mit PWA-Support
• Kosten: Kostenlos (Open Source)

Vorteil: Weniger Boilerplate, schnellere Entwicklung (-20-30% Entwicklungszeit)

Empfehlung: Für neue PWAs immer Framework nutzen (spart Zeit + Fehler).

---

Top Fehler bei PWA-Projekten

Fehler: PWA-Hype ohne Hardware-Check

Problem: “PWA spart 50%” → Aber App braucht NFC/Barcode auf iOS.

Lösung:

Hardware-Check VOR Architektur-Entscheidung:
- Liste alle benötigten Hardware-Features
- Prüfe iOS PWA-Support (caniuse.com)
- Falls NFC/Barcode iOS: Native Pflicht

Real Case: Kunde wollte PWA für Inventur-Scanner → Barcode auf iOS nicht möglich → 3 Wochen Architektur-Umplanung.

---

Fehler: iOS PWA-Limitationen ignorieren

Problem: PWA entwickelt, aber iOS-User bekommen keine Push-Notifications (vor iOS 16.4).

Lösung:

iOS-Test VOR Dev-Start:
- Teste alle kritischen Features auf iOS Safari
- Push-Notifications? Nur iOS 16.4+
- Background Sync? Funktioniert nicht auf iOS
- Barcode? getUserMedia ja, aber keine Barcode-API

Tipp: Erstelle iOS-Testliste für alle PWA-Features.

---

Fehler: Performance unterschätzt

Problem: PWA läuft auf Desktop gut, aber auf iPhone 12 laggt Liste mit 500 Items.

Lösung:

Performance-Testing auf Low-End Geräten:
- Teste auf iPhone SE (nicht nur iPhone 15 Pro)
- Virtualized Scrolling für lange Listen
- Code-Splitting (lazy-load)
- Service Worker Cache optimal konfigurieren

Benchmark-Regel: Wenn Liste >200 Items → Virtualized Scrolling Pflicht.

---

Fehler: Offline-Strategie unklar

Problem: PWA ist “offline-fähig”, aber User kann keine neuen Daten erstellen.

Lösung:

Unterscheide:
- Offline-Capable: Gecachte Daten anzeigen (Read-Only)
- Offline-First: Daten offline erstellen + später syncen (Write)

PWA = Offline-Capable (IndexedDB eingeschränkt)
Native = Offline-First (SQLite)

Tipp: Für Business-Apps mit Offline-First → Native/Flutter empfohlen.

---

Fehler: Store-Sichtbarkeit vergessen

Problem: PWA hat kein App Store Listing → keine Discovery.

Lösung:

PWA-Marketing ist komplett anders:
- SEO (Google indexiert PWA)
- Social Media Links
- QR-Codes (Events, Print)
- Partner-Websites

App Store Discovery fällt komplett weg.

Tipp: Wenn App Store Discovery wichtig → Native Pflicht (oder PWA + Native-Wrapper).

---

Checkliste: PWA oder Native?

Discovery-Phase

• Hardware-Features gelistet: NFC, Barcode, Biometrie, Kontakte?
• iOS-Support geprüft: Alle Features auf iOS Safari getestet?
• Performance-Anforderungen definiert: Listen >200 Items? 3D/Video?
• Offline-Strategie geklärt: Read-Only Cache oder Write-Operations?
• iOS-Anteil bekannt: >70% iOS-User? → Native empfohlen
• Budget definiert: <40k → PWA okay, >40k → Native/Flutter

Tech-Entscheidung

• PWA: Kein Hardware, Budget <40k, schneller Launch
• Flutter: Hardware nötig, Cross-Platform, Budget 40-70k
• Native: Performance-kritisch oder spezifische iOS/Android-Features

Nach Launch

• Performance-Monitoring: Lighthouse Score >90?
• iOS-Testing: Push, Offline, Installation funktionieren?
• Conversion-Tracking: Wie viele User installieren PWA?
• Feedback sammeln: User-Feedback zu Performance/Features

---

FAQs: PWA vs. Native

Kann ich mit einer PWA in den App Store?

Kurze Antwort: Ja, mit Wrapper - aber Apple lehnt oft ab.

Lange Antwort:

Option 1: PWA-Wrapper (PWABuilder, Capacitor)

• Verpackt PWA in Native-Container
• Submit zu App Store
• ⚠️ Apple lehnt oft ab (“Wrapper nicht erwünscht”)

Option 2: Hybrid (Ionic/Capacitor)

• PWA + Native-Features gemischt
• Bessere App Store-Approval-Chance
• Kosten: +5.000-10.000 € für Wrapper

Empfehlung: Wenn App Store wichtig → direkt Flutter/Native (keine Wrapper-Tricks).

---

Sind PWAs sicherer als Native Apps?

Kurze Antwort: Nein, beide gleich sicher (wenn richtig gebaut).

Lange Antwort:

Security-Kriterium	PWA	Native
HTTPS Pflicht	✅ Ja (Service Worker-Voraussetzung)	⚠️ Optional (aber empfohlen)
Code-Obfuscation	❌ JS immer lesbar	✅ Native-Code kompiliert
Biometrische Auth	⚠️ WebAuthn (eingeschränkt)	✅ Face ID/Touch ID
Certificate-Pinning	⚠️ Nicht möglich	✅ Ja
Keychain/KeyStore	❌ Nicht möglich	✅ Ja
DSGVO-Compliance	✅ Gleich wie Native	✅ Gleich wie PWA

Fazit: Bei sensiblen Daten (Banking) → Native (Biometrie + Keychain).

---

Wie viele User nutzen PWAs wirklich?

Kurze Antwort: Installation-Rate 5-25%, aber 100% nutzen Web-Version.

Lange Antwort:

Installation-Raten:

• iOS: 5-10% (User muss manuell “Zu Homescreen”)
• Android: 15-25% (automatisches Banner)
• Mit Onboarding: +5-10% mehr

Aber: Alle User nutzen PWA als Website (ohne Installation).

Real Data (Twitter Lite PWA):

• 10% installieren PWA
• 100% nutzen als Website
• PWA-User: 65% Session-Länge vs. Mobile-Web

Fazit: PWA funktioniert auch ohne Installation (als Website).

---

Was kostet die Wartung einer PWA?

Kurze Antwort: 3.000-8.000 €/Jahr (günstiger als Native).

Lange Antwort:

Wartung	PWA	Native
Bugfixes	2.000-4.000 €/Jahr	4.000-8.000 €/Jahr
OS-Updates	✅ Minimal (Browser-Updates)	❌ iOS/Android-Updates (jährlich)
Store-Gebühren	0 €	124 USD/Jahr
Security-Patches	1.000-2.000 €/Jahr	2.000-4.000 €/Jahr
Feature-Updates	Nach Bedarf	Nach Bedarf

Gesamt: PWA = 3.000-8.000 €/Jahr, Native = 6.000-15.000 €/Jahr

Vorteil PWA: Keine Store-Approvals → schnellere Bugfixes.

---

Kann ich später von PWA zu Native wechseln?

Kurze Antwort: Ja, aber oft komplette Neuentwicklung.

Lange Antwort:

Code-Reuse-Möglichkeiten:

• React PWA → React Native: 60-70% Code-Reuse (UI-Komponenten)
• React PWA → Flutter: 0% Code-Reuse (komplette Neuentwicklung)
• Vue PWA → Native: 0% Code-Reuse

Kosten:

• PWA → React Native: +30.000-40.000 € (60% Reuse)
• PWA → Flutter: +40.000-60.000 € (0% Reuse)
• PWA → Native (Swift/Kotlin): +50.000-80.000 € (0% Reuse)

Empfehlung: Wenn Native-Upgrade wahrscheinlich → direkt Flutter (spart spätere Migration).

---

Fazit: PWA oder Native - die ehrliche Antwort

Die wichtigsten Learnings:

• ✅ PWA okay für Business-Tools ohne Hardware (CRM, Ticketing, Dashboards)
• ❌ PWA nicht okay für Hardware (NFC/Barcode auf iOS, Biometrie)
• ⚠️ iOS-Limitationen kritisch (Background Sync, Push erst ab 16.4)
• ✅ PWA = 50-60% günstiger (aber Limitationen beachten)
• ✅ Performance: PWA 2-3× langsamer (okay für Business-Tools)
• ❌ App Store Discovery fehlt (keine Sichtbarkeit)
• ✅ Flutter = beste Alternative (Cross-Platform + voller Hardware-Zugriff)

Meine Empfehlung:

Wählen Sie PWA wenn:

• Budget <40k
• Kein Hardware (NFC, Barcode, Biometrie) nötig
• Schneller Launch wichtig (2-4 Monate)
• SEO wichtig

Wählen Sie Flutter wenn:

• Hardware-Zugriff nötig
• iOS + Android
• Budget 40-70k
• Performance wichtig

Wählen Sie Native wenn:

• Performance-kritisch (3D, AR, Video)
• Spezifische iOS/Android-Features
• Budget >70k

PWAs sind kein Allheilmittel - aber für die richtigen Use Cases perfekt.

---

Lassen Sie uns über Ihr Projekt sprechen

Sie überlegen, ob PWA oder Native die richtige Wahl ist? In einem kostenlosen Erstgespräch (30 Min):

• ✅ Analysieren wir Ihre Hardware-Anforderungen (NFC, Barcode, Biometrie?)
• ✅ Prüfen wir iOS-Limitationen (Background Sync, Push-Notifications)
• ✅ Definieren wir Performance-Anforderungen (Listen-Größe, 3D?)
• ✅ Schätzen wir Kosten transparent (PWA vs. Flutter vs. Native)

Keine Buzzwords, keine Hype-Sprache - nur ehrliche Einschätzung aus 25+ Jahren Praxis.

Termin vereinbaren →

---

Weitere hilfreiche Artikel:

• Offline-Apps entwickeln: Service Workers vs. SQLite
• Flutter App-Entwicklung: Cross-Platform Alternative zu PWA
• Native vs. Cross-Platform: Performance-Vergleich
• App-Entwicklung Kosten: PWA vs. Native Preise
• Business-App-Entwicklung: Hardware-Anforderungen prüfen
• MVP-Entwicklung: PWA als schneller Prototyp
• iOS App-Entwicklung: Native vs. PWA auf iOS
• Android App-Entwicklung: PWA vs. Native Android
• App-Sicherheit & DSGVO: PWA vs. Native Security
• App-Entwickler finden: PWA-Expertise prüfen
• Agentur oder Freelancer: Wer kann PWA?
• App erstellen lassen: PWA vs. Native entscheiden