Eine PWA erstellen heißt: du machst aus deiner bestehenden Website eine App, die sich installieren lässt, ein eigenes Icon auf dem Homescreen bekommt und ohne Adressleiste startet. Kein zweites Projekt, kein App Store, kein separater Code für Android und iOS. Du erweiterst, was schon online ist – um drei Bausteine, die du an einem Nachmittag einbauen kannst.
In diesem Artikel gehen wir den Weg komplett durch: was eine PWA technisch ausmacht, wie du sie Schritt für Schritt aufsetzt, wie es ohne Programmieren mit WordPress funktioniert und was 2026 auf iPhones und in Chrome tatsächlich möglich ist.
Inhaltsverzeichnis
- Was ist eine PWA?
- Was du für eine PWA brauchst
- PWA erstellen in 6 Schritten
- PWA mit WordPress erstellen – ohne eine Zeile Code
- PWA ohne eigene Entwicklung
- Was 2026 wirklich funktioniert – und was nicht
- PWA in den Google Play Store bringen
- Was eine PWA für dein SEO bedeutet
- Deine Checkliste zum Start
- Häufige Fragen zu PWAs
Webhosting: Schnell, sicher & flexibel für jedes Projekt
Entdecke skalierbare Webhosting-Pakete mit SSL-Zertifikat, inklusiver Domain und SSD-Speicher
Was ist eine PWA?
PWA steht für Progressive Web App. Es ist keine neue Technologie und kein Framework, sondern eine Website, die drei zusätzliche Dinge mitbringt: eine verschlüsselte Verbindung, eine Datei mit App-Informationen (das Web App Manifest) und ein Skript, das im Hintergrund läuft und Inhalte zwischenspeichert (den Service Worker).
Das Ergebnis fühlt sich für deine Besucher wie eine App an. Sie tippen auf ein Icon, deine Seite öffnet sich im Vollbild, wiederkehrende Aufrufe laden fast sofort, und bei schlechtem Empfang siehst du keine Fehlerseite des Browsers, sondern deine eigene. Für dich bleibt es aber eine Website: eine Codebasis, ein Deployment, kein Review-Prozess vor jedem Update.
PWA oder native App – was passt zu deinem Projekt?
| Kriterium | PWA | Native App |
|---|---|---|
| Verteilung | über deine URL, Installation direkt im Browser | App Store und Google Play, mit Review |
| Aufwand | eine Codebasis für alle Geräte | je Plattform eigene Entwicklung |
| Updates | sofort live, wie ein Website-Deployment | über Store-Update, mit Prüfzeit |
| Gerätezugriff | Kamera, Standort, Push – aber nicht alles | vollständiger Zugriff auf Systemfunktionen |
Grobe Faustregel: Wenn dein Angebot im Kern aus Inhalten, Buchungen, Bestellungen oder Kundenkonten besteht, reicht eine PWA. Wenn du Bluetooth-Geräte steuerst, im Hintergrund dauerhaft Daten synchronisierst oder Store-Sichtbarkeit als Vertriebskanal brauchst, führt der Weg an einer nativen App nicht vorbei.
Was du für eine PWA brauchst
Drei Bausteine, mehr nicht:
- HTTPS: Service Worker laufen nur über eine verschlüsselte Verbindung. Bei jedem Webhosting-Paket von dogado ist ein SSL-Zertifikat enthalten, du musst es nur aktivieren.
- Web App Manifest: eine kleine JSON-Datei mit Name, Icons, Startseite und Anzeigemodus.
- Service Worker: ein JavaScript, das zwischen Browser und Server sitzt, Dateien cacht und Offline-Verhalten steuert.
Dazu kommt eine eigene Domain, denn Manifest und Service Worker gelten immer für genau eine Herkunft. Falls du noch keine hast: im Domain-Check siehst du in Sekunden, was frei ist.
Sichere deinen Firmennamen: Mit dogado zur perfekten Domain
Der richtige Firmenname ist deine Markenidentität – die passende Domain macht ihn digital wirksam. Bei dogado reservierst du nicht nur einen Namen, sondern die technische Grundlage für deinen Online-Erfolg. Mit professioneller E-Mail, optimiertem Hosting und persönlicher Unterstützung starten wir deine digitale Präsenz.
PWA erstellen in 6 Schritten
1. HTTPS prüfen
Ruf deine Seite auf und schau, ob sie über https:// lädt – und zwar alle Unterseiten, nicht nur die Startseite. Gemischte Inhalte (ein Bild oder Skript über http://) blockieren die Registrierung des Service Workers. Falls du noch umstellen musst: Zertifikat aktivieren, dann alle http://-Aufrufe per 301 auf https:// weiterleiten.
2. manifest.webmanifest anlegen
Lege die Datei im Wurzelverzeichnis deiner Website ab. Das hier ist eine vollständige, funktionierende Minimalversion:
{
"name": "Musterbetrieb Terminbuchung",
"short_name": "Musterbetrieb",
"start_url": "/?source=pwa",
"scope": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0a5cff",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}Zwei Felder lohnen einen zweiten Blick. short_name ist das, was unter dem Icon steht – halte dich unter zwölf Zeichen, sonst kürzt das System. Und der Parameter ?source=pwa in start_url kostet nichts und zeigt dir später in der Statistik, wie viele Sitzungen aus der installierten App kommen.
3. Manifest einbinden
Im <head> jeder Seite:
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0a5cff">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">Das apple-touch-icon ist kein Relikt. iOS greift für das Homescreen-Icon bevorzugt darauf zu – fehlt es, nimmt Safari einen Screenshot deiner Seite, und der sieht selten gut aus.
4. Icons in den richtigen Größen erzeugen
Du brauchst mindestens 192 × 192 und 512 × 512 Pixel als PNG. Dazu ein maskierbares Icon ("purpose": "maskable"): Android schneidet Icons in Kreise, Quadrate oder Squircles, je nach Hersteller. Halte bei diesem Icon rund 20 Prozent Rand frei, sonst wird dein Logo beschnitten. Wenn du kein Design-Tool zur Hand hast, erzeugt der kostenlose Maskable Editor die passenden Varianten aus einer Vorlage.
5. Service Worker registrieren
Erst die Registrierung, am Ende deines <body>:
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker.register("/sw.js");
});
}
</script>Dann die Datei sw.js, ebenfalls im Wurzelverzeichnis. Sie cacht dein Grundgerüst und zeigt bei fehlender Verbindung eine eigene Offline-Seite:
const CACHE = "app-v1";
const ASSETS = ["/", "/offline.html", "/css/style.css"];
self.addEventListener("install", (event) => {
event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(ASSETS)));
});
self.addEventListener("activate", (event) => {
event.waitUntil(
caches.keys().then((keys) =>
Promise.all(keys.filter((key) => key !== CACHE).map((key) => caches.delete(key)))
)
);
});
self.addEventListener("fetch", (event) => {
if (event.request.mode === "navigate") {
event.respondWith(
fetch(event.request).catch(() => caches.match("/offline.html"))
);
}
});Wichtig: Die Zahl in app-v1 musst du bei jeder Änderung an den gecachten Dateien hochzählen. Sonst servieren Browser wochenlang die alte Version, und du suchst den Fehler an der falschen Stelle. Wenn deine Caching-Strategie komplexer wird, nimm die Bibliothek Workbox von Google statt alles selbst zu schreiben.
6. Installation testen
Öffne deine Seite in Chrome, dann die Entwicklertools und den Reiter Application. Unter Manifest und Service Workers siehst du, was der Browser erkennt und woran es gegebenenfalls scheitert. Danach testest du auf echten Geräten: einmal Android, einmal iPhone. Emulatoren zeigen das Installationsverhalten nicht zuverlässig.
Ein Hinweis, der dir Zeit spart: In Chrome findest du keinen PWA-Score mehr. Google hat die PWA-Kategorie mit Lighthouse 12 entfernt, weil die Prüfpunkte an veraltete Installationskriterien gekoppelt waren. Wer heute noch einen „Lighthouse-PWA-Score" von dir verlangt, arbeitet mit einer Anleitung von 2023.
PWA mit WordPress erstellen – ohne eine Zeile Code
Läuft deine Seite auf WordPress, brauchst du keinen der Schritte oben selbst umzusetzen. Plugins wie Super Progressive Web Apps oder PWA for WP erzeugen Manifest und Service Worker automatisch, du pflegst Name, Icons, Farben und Offline-Seite über ein normales Einstellungsformular.
Was du trotzdem im Blick behalten solltest: Diese Plugins legen eine zweite Caching-Ebene über deine Seite. Kombiniert mit einem Caching-Plugin und serverseitigem Caching kommt es schnell zu Effekten, bei denen Besucher veraltete Inhalte sehen. Prüf nach der Aktivierung eine Handvoll Seiten im privaten Fenster, und teste den Ablauf einmal komplett nach einem Beitrags-Update.
Wenn dein Hosting bei einem WordPress-Hosting mit vorkonfiguriertem Caching liegt, ist die Reihenfolge klar: erst schauen, was der Server schon macht, dann das Plugin darauf abstimmen. Bei Fragen dazu erreichst du unseren deutschsprachigen Support direkt.
Die richtige Basis für dein WordPress-Projekt
Dein WordPress-Projekt braucht solides Hosting? Mit unserem WordPress-Hosting bekommst du optimierte Server, echte Sicherheit und Support, der antwortet. Starten kostet weniger als du denkst – schau dir unsere Pakete an.
PWA ohne eigene Entwicklung
Du willst gar nicht selbst schrauben? Dann gibt es zwei praktikable Wege.
Der erste: ein Baukasten. Mit dem Homepage-Baukasten baust du deine Seite per Drag-and-drop, sie ist mobil optimiert und über HTTPS erreichbar – die Grundlage, auf der eine PWA überhaupt erst funktioniert. Prüf vor dem Start, welche PWA-Funktionen dein Baukasten unterstützt, das unterscheidet sich zwischen Anbietern deutlich.
Der zweite: du gibst es ab. Bei der Website-Erstellung übernehmen wir Konzeption und Umsetzung, inklusive der technischen Basis für installierbare Web-Apps. Sinnvoll, wenn die PWA Teil eines größeren Relaunches ist und nicht als Nachrüstung gedacht.
Für Anwendungen mit eigener Datenbank, Warteschlangen oder Node.js-Prozessen im Hintergrund reicht Shared Hosting irgendwann nicht mehr. Dann ist ein VPS die passende Basis: eigene Ressourcen, volle Kontrolle über die Konfiguration, und du entscheidest selbst, welche Dienste laufen.
VPS von dogado - gehostet in Deutschland
Behalte die Kontrolle über deinen vServer/VPS und steuere deine Online-Präsenz souverän. Profitiere von Hochgeschwindigkeits-NVME-SSDs, die bis zu 6-mal schneller sind als herkömmliche.
Was 2026 wirklich funktioniert – und was nicht
PWAs auf dem iPhone
Der alte Satz „PWAs funktionieren auf iOS nicht" stimmt so nicht mehr, aber ganz aufgelöst ist die Lage auch nicht.
Was geht: Seit iOS 16.4 können installierte Web-Apps Push-Nachrichten senden. Das Badge auf dem Icon funktioniert ebenfalls. Safari 18.4 hat Declarative Web Push nachgelegt – eine vereinfachte Variante, die ohne eigenen Service Worker auskommt. Und seit iOS 26 öffnet Apple jede Seite, die zum Homescreen hinzugefügt wird, standardmäßig als Web-App, auch ohne Manifest; der Nutzer kann das beim Hinzufügen über „Als Web-App öffnen" abschalten.
Was nicht geht: Safari kennt kein beforeinstallprompt. Es gibt also keinen automatischen Installations-Hinweis wie in Chrome auf Android. Deine Besucher müssen den Weg über Teilen → Zum Home-Bildschirm gehen, und wenn du sie nicht darauf hinweist, tut es fast niemand. Ein kurzer, dezenter Hinweis für iOS-Besucher ist deshalb keine Kosmetik, sondern der entscheidende Schritt. Push-Nachrichten wiederum funktionieren ausschließlich in der installierten Web-App, nie im normalen Safari-Tab. Hintergrund-Synchronisation fehlt, und iOS kann gespeicherte Daten löschen, wenn eine Web-App lange nicht genutzt wird.
Zur DMA-Frage, die 2024 für Unruhe gesorgt hat: Apple hatte angekündigt, Homescreen-Web-Apps in der EU mit iOS 17.4 auf Lesezeichen zu reduzieren, und diese Entscheidung nach Rückmeldungen zurückgenommen. In der EU funktionieren PWAs auf iOS also regulär.
Installation in Chrome und Edge
Hier ist es entspannter, aber auch hier hat sich etwas geändert. Für den Eintrag „App installieren" im Browsermenü ist ein Service Worker mit fetch-Handler keine Voraussetzung mehr – Google hat diese Anforderung mit Chrome 108 auf Mobilgeräten und 112 auf dem Desktop gestrichen. Für die automatische Installationsaufforderung, für Offline-Verhalten, Caching und Push brauchst du ihn weiterhin. Übersetzt: Ein Service Worker ist kein Häkchen auf einer Checkliste mehr, sondern nur noch dann sinnvoll, wenn er tatsächlich etwas tut.
PWA in den Google Play Store bringen
Deine PWA lässt sich als echte Android-App veröffentlichen, ohne dass du Android-Code schreibst. Die Technik dahinter heißt Trusted Web Activity: Deine Website läuft dabei in einer Chrome-Instanz ohne Browser-Oberfläche.
Der Ablauf in Kurzform: Du erzeugst das Paket mit PWABuilder oder Googles Bubblewrap, lädst eine assetlinks.json in das Verzeichnis /.well-known/ deiner Domain – damit belegst du, dass App und Website zusammengehören –, und reichst die entstandene .aab-Datei in der Play Console ein. Das Entwicklerkonto bei Google kostet einmalig 25 US-Dollar. Fehlt der Nachweis über die assetlinks.json, startet deine App mit sichtbarer Browserleiste, was den ganzen Effekt zunichtemacht.
Für Apples App Store gibt es diesen Weg nicht. Eine PWA lässt sich dort nicht direkt einreichen; dafür bräuchtest du einen nativen Container. Wenn Store-Präsenz auf iOS zu deinen Anforderungen gehört, plane das von Anfang an ein.
Was eine PWA für dein SEO bedeutet
Klar getrennt: „PWA" ist kein Rankingfaktor. Google bewertet keine Manifest-Datei. Indirekt hilft sie trotzdem, weil sauberes Caching die Ladezeit bei wiederkehrenden Besuchen verbessert, und Ladezeit fließt über die Core Web Vitals in die Bewertung ein.
Zwei Stolpersteine, an denen wir in der Praxis Projekte scheitern sehen. Erstens: Wenn deine Inhalte ausschließlich per JavaScript nachgeladen werden, hat der Crawler nichts zu indexieren. Jede Seite braucht eine eigene URL und serverseitig ausgelieferten Inhalt. Zweitens: Ein zu aggressiver Service Worker kann veraltete Versionen deiner Seiten ausliefern. Prüf nach dem Livegang stichprobenweise mit der URL-Prüfung in der Search Console, was Google tatsächlich sieht.
Noch ein aktueller Punkt: HowTo-Markup für Schritt-für-Schritt-Anleitungen brauchst du nicht mehr einzubauen. Google hat die zugehörigen Rich Results eingestellt. Article- und FAQPage-Markup sind weiterhin relevant.
Deine Checkliste zum Start
- HTTPS aktiv, keine gemischten Inhalte
manifest.webmanifestim Wurzelverzeichnis, im<head>verlinkt- Icons in 192 und 512 Pixel plus maskierbare Variante, dazu
apple-touch-icon - Service Worker registriert, Cache-Version wird bei Änderungen erhöht
- Eigene Offline-Seite statt Browser-Fehlermeldung
- Installations-Hinweis für iOS-Besucher eingebaut
- Auf echtem Android- und iOS-Gerät getestet
Die Basis für all das ist ein Hosting, das HTTPS, eigene Dateien im Wurzelverzeichnis und aktuelle PHP-Versionen mitbringt. Genau darauf ist unser Webhosting ausgelegt – und wenn du deine Seite auf WordPress betreibst, nimm das WordPress-Hosting, dort ist die Umgebung schon vorbereitet. Fehlt noch die passende Adresse, findest du sie über den Domain-Check.
Sichere deinen Firmennamen: Mit dogado zur perfekten Domain
Der richtige Firmenname ist deine Markenidentität – die passende Domain macht ihn digital wirksam. Bei dogado reservierst du nicht nur einen Namen, sondern die technische Grundlage für deinen Online-Erfolg. Mit professioneller E-Mail, optimiertem Hosting und persönlicher Unterstützung starten wir deine digitale Präsenz.
Und wenn die PWA steht, aber niemand sie findet: Installationen entstehen aus Besuchern. Unsere SEO-Dienstleistungen arbeiten an der organischen Sichtbarkeit, mit SEA holst du kurzfristig Reichweite dazu.
Häufige Fragen zu PWAs
Was ist der Unterschied zwischen einer PWA und einer nativen App?
Eine PWA ist eine Website mit App-Funktionen: eine Codebasis für alle Geräte, Verteilung über deine URL, Updates sofort live. Eine native App wird pro Plattform entwickelt, über die Stores verteilt und hat vollen Zugriff auf Systemfunktionen.
Brauche ich für eine PWA zwingend einen Service Worker?
Für die Installation über das Chrome-Menü nicht mehr. Für Offline-Nutzung, Caching und Push-Nachrichten schon. In der Praxis willst du ihn haben, weil ohne ihn der Geschwindigkeitsvorteil entfällt.
Funktionieren PWAs auf dem iPhone?
Ja. Installation läuft über Teilen → Zum Home-Bildschirm, Push-Nachrichten sind ab iOS 16.4 möglich, sobald die Web-App installiert ist. Es fehlen ein automatischer Installations-Hinweis und Hintergrund-Synchronisation.
Kann ich eine PWA in den App Store bringen?
In den Google Play Store ja, über eine Trusted Web Activity mit PWABuilder oder Bubblewrap. In Apples App Store lässt sich eine PWA nicht direkt einreichen.
Was kostet es, eine PWA zu erstellen?
Das hängt vom Weg ab. Mit einem WordPress-Plugin bleibt es beim Zeitaufwand für Einrichtung und Test. Bei einer individuell entwickelten Anwendung bestimmt der Funktionsumfang die Kosten. Zusätzlich fällt für die Veröffentlichung bei Google Play das Entwicklerkonto mit einmalig 25 US-Dollar an.
Hilft eine PWA meinem Ranking?
Nicht direkt – PWA ist kein Rankingfaktor. Indirekt über bessere Ladezeiten bei wiederkehrenden Besuchen. Voraussetzung ist, dass deine Inhalte crawlbar bleiben und jede Seite eine eigene URL hat.
WhatsApp
