Eine PWA erstellen heißt: Du machst aus deiner bestehenden Website eine App, die sich installieren lässt, ein eigenes Symbol am Startbildschirm bekommt und auch ohne Internetverbindung noch etwas anzeigt. Ohne App Store, ohne zwei getrennte Entwicklungen für Android und iOS, ohne Freigabeverfahren. Du brauchst dafür drei Dinge: eine Datei namens Manifest, ein kleines Skript namens Service Worker und eine Website, die über HTTPS läuft.
Diese Anleitung führt dich durch alle Schritte – mit Code, den du kopieren kannst, und mit dem, was 2026 wirklich funktioniert.
Inhaltsverzeichnis
- Was eine Progressive Web App ausmacht
- Was du vorher brauchst
- Schritt 1: Das Web App Manifest anlegen
- Schritt 2: Icons vorbereiten
- Schritt 3: Den Service Worker einrichten
- Schritt 4: Eine Offline-Seite bauen
- Schritt 5: Installation testen
- PWA am iPhone: Was 2026 geht
- Den Installations-Hinweis selbst steuern
- PWA aus WordPress machen – ohne Code
- PWA oder native App?
- Fünf Fehler, die sich leicht vermeiden lassen
- Häufige Fragen zum Erstellen einer PWA
Deine perfekte Domain — mit nur einem Klick
Du willst online durchstarten? Bei easyname findest du über 480 Domain-Endungen — von klassischen .com und .at bis zu kreativen Spezialdomains. Finde in Sekunden deine Wunschadresse, sicher dir deinen Namen und mach dein Projekt sichtbar.
Was eine Progressive Web App ausmacht
Eine Progressive Web App (kurz PWA) ist eine normale Website, die zusätzlich ein paar Browser-Funktionen nutzt. Der Browser erkennt diese Signale und behandelt die Seite dann wie eine App:
- Installierbar: Nutzer legen dein Symbol auf den Startbildschirm.
- Eigenes Fenster: Die App startet ohne Adressleiste und Browser-Rahmen.
- Offline nutzbar: Zwischengespeicherte Inhalte bleiben ohne Verbindung erreichbar.
- Schnell beim zweiten Aufruf: Was im Cache liegt, muss nicht neu geladen werden.
- Push-Nachrichten: möglich auf Android, Desktop und – mit Einschränkungen – auf iOS.
Der große Unterschied zur klassischen App: Es gibt nur eine Codebasis, und du veröffentlichst Änderungen selbst. Keine Prüfung durch Apple oder Google, keine Provision, keine Wartezeit.
Was du vorher brauchst
Drei Voraussetzungen, dann kann es losgehen:
1. Eine eigene Domain. Deine App braucht eine Adresse, die Nutzer wiederfinden – und das Manifest bezieht sich immer auf genau diese Domain.
2. Webhosting mit HTTPS. Service Worker laufen ausschließlich über eine verschlüsselte Verbindung. Ohne gültiges SSL-Zertifikat wird deine PWA nicht installierbar. Die einzige Ausnahme ist localhost zum Entwickeln.
3. Zugriff auf das Wurzelverzeichnis. Sowohl das Manifest als auch der Service Worker sollten direkt im Hauptverzeichnis liegen – also unter deine-domain.at/sw.js, nicht in einem Unterordner. Der Grund: Ein Service Worker darf nur den Bereich steuern, in dem er selbst liegt.
Deine Website in besten Händen: Webhosting für dein Projekt
Profitiere von ultraschnellen SSD-Servern, kostenloser SSL-Verschlüsselung und persönlichem Support. Mit easyname Webhosting bringst du deine Website in wenigen Minuten online – sicher, stabil und sorgenfrei.
Schritt 1: Das Web App Manifest anlegen
Das Manifest ist eine kleine Textdatei im JSON-Format. Sie sagt dem Browser, wie deine App heißt, welches Symbol sie hat und wie sie starten soll.
Erstelle im Wurzelverzeichnis eine Datei manifest.webmanifest:
{
"id": "/",
"name": "Mein Beispiel-Shop",
"short_name": "Beispiel",
"description": "Bestellen, verfolgen, wiederkommen – auch offline.",
"start_url": "/?quelle=pwa",
"scope": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#08111b",
"lang": "de-AT",
"dir": "ltr",
"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" }
]
}Ein paar Felder verdienen Erklärung:
short_nameerscheint unter dem Symbol am Startbildschirm. Halte ihn unter zwölf Zeichen, sonst kürzt das System.start_urlist die Seite, die beim Antippen des Symbols öffnet. Der angehängte Parameter?quelle=pwakostet nichts und zeigt dir später in der Auswertung, wie viele Aufrufe aus der installierten App kommen.display: "standalone"startet ohne Browser-Rahmen. Alternativen sindfullscreen,minimal-uiundbrowser.scopelegt fest, welche Adressen noch als Teil der App gelten. Verlässt ein Link diesen Bereich, öffnet er im Browser.
Dann verlinke das Manifest im <head> jeder Seite:
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#08111b">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png">Wenn das Manifest nicht erkannt wird
Ein häufiger Stolperstein liegt am Server, nicht am Code: Die Endung .webmanifest ist manchen Konfigurationen unbekannt, dann liefert der Server den falschen Dateityp. Auf Apache hilft eine Zeile in der .htaccess:
AddType application/manifest+json .webmanifestAlternativ nennst du die Datei einfach manifest.json – das funktioniert ebenfalls.
Schritt 2: Icons vorbereiten
Du brauchst mindestens zwei Symbole, besser vier:
| Datei | Größe | Zweck |
|---|---|---|
icon-192.png | 192 × 192 | Startbildschirm Android |
icon-512.png | 512 × 512 | Startvorschau, App-Übersichten |
maskable-512.png | 512 × 512 | Android schneidet frei zu |
apple-touch-icon-180.png | 180 × 180 | iPhone und iPad |
Zwei Punkte, die oft schiefgehen:
Das maskable Icon braucht Rand. Android schneidet Symbole in Kreise, Quadrate oder Tropfenformen. Halte dein Motiv im inneren Bereich – etwa 80 Prozent der Fläche – und lass den Rest als Hintergrundfläche. Ohne dieses Icon setzt Android dein Bild in ein weißes Kästchen.
Safari liest das Manifest für Symbole nicht zuverlässig. Deshalb gehört das apple-touch-icon zusätzlich in den <head>. Ohne es nimmt iOS einen Bildschirmausschnitt deiner Seite als Symbol – das sieht nach nichts aus.
Schritt 3: Den Service Worker einrichten
Der Service Worker ist ein Skript, das im Hintergrund läuft – auch wenn deine Seite geschlossen ist. Er fängt Anfragen ab und entscheidet, ob er sie aus dem Cache beantwortet oder ans Netz weitergibt. Das ist der Teil, der deine App offlinefähig macht.
Lege eine Datei sw.js im Wurzelverzeichnis an:
const CACHE = "app-shell-v1";
const VORLADEN = [
"/",
"/offline.html",
"/css/style.css",
"/js/app.js",
"/icons/icon-192.png"
];
// Installieren: Grundgerüst in den Cache legen
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE).then((cache) => cache.addAll(VORLADEN))
);
self.skipWaiting();
});
// Aktivieren: alte Cache-Versionen aufräumen
self.addEventListener("activate", (event) => {
event.waitUntil(
caches.keys().then((keys) =>
Promise.all(
keys.filter((key) => key !== CACHE).map((key) => caches.delete(key))
)
)
);
self.clients.claim();
});
// Anfragen beantworten
self.addEventListener("fetch", (event) => {
if (event.request.method !== "GET") return;
// Seitenaufrufe: erst Netz, bei Ausfall die Offline-Seite
if (event.request.mode === "navigate") {
event.respondWith(
fetch(event.request).catch(() => caches.match("/offline.html"))
);
return;
}
// Alles andere: erst Cache, sonst Netz und nachträglich speichern
event.respondWith(
caches.match(event.request).then((treffer) => {
if (treffer) return treffer;
return fetch(event.request).then((antwort) => {
const kopie = antwort.clone();
caches.open(CACHE).then((cache) => cache.put(event.request, kopie));
return antwort;
});
})
);
});Registriere ihn auf deiner Seite:
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker.register("/sw.js");
});
}
</script>Die Cache-Version bei jeder Änderung erhöhen
Der Wert app-shell-v1 ist deine Versionsnummer. Änderst du CSS oder JavaScript, zähle sie hoch – app-shell-v2, v3 und so weiter. Sonst servieren installierte Geräte weiterhin die alten Dateien aus dem Cache, und du wunderst dich, warum deine Änderung nirgends ankommt. Das ist der Fehler, der Einsteiger am häufigsten Stunden kostet.
Schritt 4: Eine Offline-Seite bauen
Die Datei offline.html ist das, was Nutzer ohne Verbindung sehen. Halte sie einfach und ohne externe Abhängigkeiten – alles, was sie zum Anzeigen braucht, muss im Cache liegen.
<!DOCTYPE html>
<html lang="de-AT">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gerade offline</title>
</head>
<body>
<h1>Du bist gerade offline</h1>
<p>Sobald du wieder Verbindung hast, geht es weiter. Zuletzt geöffnete
Seiten kannst du auch jetzt aufrufen.</p>
<button onclick="location.reload()">Nochmal versuchen</button>
</body>
</html>Schritt 5: Installation testen
Öffne deine Seite in Chrome oder Edge, dann die Entwicklertools mit <kbd>F12</kbd>. Unter Anwendung (englisch Application) findest du:
- Manifest – alle erkannten Felder plus Vorschau der Symbole
- Service Workers – Status, Fehler und ein Schalter für Offline-Tests
- Cache Storage – was tatsächlich gespeichert wurde
Wenn alles passt, erscheint in der Adressleiste ein Installationssymbol.
Wichtig zu wissen: Lighthouse hat die eigene PWA-Kategorie entfernt – einen „PWA-Score" gibt es nicht mehr. Viele Anleitungen im Netz verweisen noch darauf. Prüfe stattdessen direkt in den Entwicklertools unter „Anwendung".
Ebenfalls neu gegenüber älteren Anleitungen: Chrome verlangt für die Installation über das Menü keinen Service Worker mehr – diese Bedingung ist auf Mobilgeräten seit Version 108 und am Desktop seit Version 112 weggefallen. Für den automatischen Installations-Hinweis wird ein aktiver fetch-Handler weiterhin vorausgesetzt. Und für Offline-Betrieb und Push-Nachrichten brauchst du den Service Worker ohnehin.
PWA am iPhone: Was 2026 geht
iOS ist der Teil, bei dem die meisten veralteten Informationen im Umlauf sind. Der aktuelle Stand:
Das funktioniert:
- Installation über Teilen → Zum Home-Bildschirm
- Start im eigenen Fenster ohne Safari-Leiste
- Service Worker und Cache für Offline-Inhalte
- Push-Nachrichten seit iOS 16.4 (März 2023) – aber nur, wenn die App zuvor am Home-Bildschirm installiert wurde. Aus einem Safari-Tab heraus geht es nicht.
- Zähler-Symbol am App-Icon über die Badging-Funktion
- Seit iOS 26 öffnet jede zum Home-Bildschirm hinzugefügte Website standardmäßig als Web-App – sogar ohne Manifest. Nutzer können das beim Hinzufügen abschalten.
Das geht nicht:
- Kein automatischer Installations-Dialog. Nutzer müssen den Weg über das Teilen-Menü kennen. Ein dezenter Hinweis auf deiner Seite hilft hier mehr als jede technische Lösung.
- Keine Aktualisierung von Inhalten im Hintergrund. Was Nutzer beim Öffnen sehen, ist der Stand vom letzten Besuch, bis neu geladen wird.
- Knapperer Speicherplatz als in Chrome.
- Alle Browser auf iOS nutzen WebKit. Chrome oder Firefox am iPhone verhalten sich deshalb genauso wie Safari.
Für Österreich und die EU wichtig: Apple hatte im Februar 2024 angekündigt, Home-Screen-Web-Apps in der EU zu entfernen, und diese Entscheidung Anfang März 2024 zurückgenommen. PWAs funktionieren hier also normal. Falls du auf Artikel stößt, die das Gegenteil behaupten – die sind auf dem Stand der damaligen Beta.
Den Installations-Hinweis selbst steuern
Auf Android und am Desktop kannst du den Moment bestimmen, in dem du zur Installation einlädst. Das bringt deutlich mehr als der Standard-Hinweis des Browsers, weil du ihn dort platzierst, wo er Sinn ergibt – etwa nach einer abgeschlossenen Bestellung.
let installEreignis = null;
const knopf = document.querySelector("#installieren");
window.addEventListener("beforeinstallprompt", (event) => {
event.preventDefault();
installEreignis = event;
knopf.hidden = false;
});
knopf.addEventListener("click", async () => {
if (!installEreignis) return;
knopf.hidden = true;
installEreignis.prompt();
await installEreignis.userChoice;
installEreignis = null;
});Kleiner Hinweis zur Reihenfolge: Frage erst nach der Installation, dann nach der Erlaubnis für Push-Nachrichten. Auf iOS funktioniert Push ausschließlich in dieser Reihenfolge, und auch sonst sagen mehr Leute ja, wenn sie die App schon nutzen.
PWA aus WordPress machen – ohne Code
Läuft deine Seite auf WordPress, brauchst du für den Anfang keine Zeile selbst zu schreiben. Etablierte Zusatzmodule erzeugen Manifest und Service Worker automatisch:
- Super Progressive Web Apps (SuperPWA) – der schnellste Weg: Name, Kurzname, Symbol eintragen, fertig.
- PWA for WP – mehr Einstellmöglichkeiten, unter anderem für die Cache-Strategie.
- PWA – die schlanke Variante, die vor allem Grundfunktionen bereitstellt und sich mit eigenem Code erweitern lässt.
Was du danach trotzdem selbst erledigen solltest: eigene Symbole hochladen (die Standardvorgaben sehen nach Standardvorgaben aus), eine sinnvolle Offline-Seite hinterlegen und mit einem Caching-Modul abstimmen, damit sich nicht zwei Systeme um dieselben Dateien streiten.
Wenn du noch keine Website hast und lieber ohne WordPress startest: Ein Homepage-Baukasten liefert dir eine schnelle, mobiltaugliche Basis, auf der du später aufbauen kannst.
Deine Website, dein Design – fertig in wenigen Klicks
Erstelle deine eigene Website mit easyname: Wähle aus verschiedenen Designs, gestalte deine Seiten per Drag-and-Drop und verkaufe mit dem integrierten Webshop direkt online. Kein technisches Vorwissen nötig – einfach loslegen, ab 4,90 € im Monat.
PWA oder native App?
Es gibt keine allgemeingültige Antwort, aber eine brauchbare Faustregel.
Eine PWA passt gut, wenn deine App vor allem Inhalte zeigt, Formulare verarbeitet oder Bestellungen abwickelt – also Terminbuchung, Speisekarte, Kundenportal, Shop, internes Werkzeug. Auch wenn du schnell starten willst oder ein knappes Budget hast: Es bleibt bei einer Codebasis, und Aktualisierungen sind sofort live.
Eine native App ist die bessere Wahl, wenn du auf Bluetooth-Geräte, dauerhafte Standortverfolgung im Hintergrund, umfangreiche Kamerasteuerung oder Anzeigen am Sperrbildschirm angewiesen bist. Oder wenn Auffindbarkeit im App Store Teil deiner Vertriebsstrategie ist.
Ein hübscher Nebeneffekt der PWA: Sie bleibt eine Website. Google findet sie, du kannst sie per Link teilen, und Interessierte probieren sie aus, ohne vorher etwas zu installieren.
Fünf Fehler, die sich leicht vermeiden lassen
- Cache-Version nicht erhöht. Deine Änderungen kommen bei installierten Geräten nicht an. Immer hochzählen.
- Service Worker in einem Unterordner. Er steuert dann nur diesen Ordner. Ins Wurzelverzeichnis damit.
- Alles in den Cache legen. Vorladen gehört das Grundgerüst – nicht jedes Bild und schon gar nicht Formularantworten.
apple-touch-iconvergessen. Am iPhone landet dann ein Bildschirmausschnitt als Symbol am Home-Bildschirm.- Nur im Desktop-Browser getestet. Installation, Offline-Verhalten und Push zeigen sich erst auf einem echten Gerät. Teste beides – Android und iOS.
Häufige Fragen zum Erstellen einer PWA
Kann ich eine PWA ohne Programmierkenntnisse erstellen?
Ja. Auf WordPress übernimmt ein Zusatzmodul Manifest und Service Worker komplett. Symbole und Offline-Seite solltest du trotzdem selbst gestalten – das macht den Unterschied zwischen „funktioniert" und „sieht nach eigener App aus".
Brauche ich für eine PWA eine eigene Domain?
Für den Betrieb ja. Deine App braucht eine feste Adresse mit HTTPS, und der Service Worker gilt genau für diese Domain. Zum Ausprobieren reicht localhost – dort läuft alles auch ohne Zertifikat.
Funktioniert eine PWA auf dem iPhone?
Ja, mit Einschränkungen. Installation, eigenes Fenster und Offline-Betrieb laufen. Push-Nachrichten funktionieren ab iOS 16.4, aber nur nach Installation am Home-Bildschirm. Aktualisierungen im Hintergrund unterstützt iOS nicht.
Was kostet eine PWA?
Die Technik selbst kostet nichts – Manifest und Service Worker sind Teil des Browsers. Laufende Kosten entstehen für Domain und Webhosting. Verglichen mit zwei getrennten Apps für Android und iOS plus App-Store-Gebühren ist der Unterschied deutlich.
Ist eine PWA gut für die Auffindbarkeit bei Google?
Sie hilft eher, als dass sie schadet. Eine PWA bleibt eine indexierbare Website, und ein gut eingerichteter Cache verbessert die Ladezeiten bei wiederkehrenden Besuchen. Ein eigener Rankingvorteil ergibt sich daraus nicht – aber schnelle, mobiltaugliche Seiten sind ohnehin Teil der Bewertung.
Wie aktualisiere ich meine PWA?
Du lädst die geänderten Dateien auf den Server und erhöhst die Cache-Version im Service Worker. Beim nächsten Aufruf holt sich das Gerät die neue Fassung. Keine Freigabe, keine Wartezeit.
E-Mail-Login leicht gemacht: Unsere meistgesuchten Anleitungen
Der Weg ins Postfach sollte schnell und unkompliziert sein – doch manchmal hakt es beim Login. In unseren Schritt-für-Schritt-Guides erfährst du, wie du dich zuverlässig beim GMX Login anmeldest, den A1 Webmail-Zugang nutzt oder Probleme beim Hotmail Login löst – inklusive Hilfe bei Störungen, vergessenen Passwörtern und Kontoeinstellungen.
Auch für alle, die Microsoft-Dienste nutzen, haben wir die passende Anleitung: Unser Ratgeber zum Office 365 Login zeigt dir, wie du dich schnell bei Microsoft 365 anmeldest und typische Login-Probleme behebst.
WhatsApp
