Eine Progressive Web App (PWA) ist eine Website, die sich wie eine App verhält: installierbar auf dem Startbildschirm, funktionsfähig bei schlechter Verbindung und schnell ladend dank intelligentem Caching. Für Unternehmer bedeutet das ein app-ähnliches Erlebnis ohne die Kosten und den Wartungsaufwand einer nativen App in den App Stores. In diesem Artikel erfährst du, was eine PWA genau ist, welche Komponenten benötigt werden und wie du selbst eine baust und veröffentlichst.
Was ist eine Progressive Web App
Eine PWA kombiniert die Erreichbarkeit einer Website mit Funktionen, die zuvor nativen Apps vorbehalten waren: Offline-Funktionalität, Push-Benachrichtigungen und Installation auf einem Telefon oder Desktop ohne Umweg über einen App Store. Drei Merkmale stehen im Mittelpunkt: Die App funktioniert für jeden unabhängig vom Browser (progressiv), passt sich jeder Bildschirmgröße an (responsiv) und bleibt auch ohne oder mit wechselnder Internetverbindung funktionsfähig.
Für Unternehmer ist dies interessant, weil man mit einer einzigen Codebasis ein Erlebnis bietet, das auf Desktop, Tablet und Mobilgerät funktioniert, ohne separate Apps für iOS und Android pflegen zu müssen. Kunden können die PWA direkt von der Website installieren, was Hürden abbaut und wiederholte Besuche fördert.
Benötigte Komponenten
Eine funktionierende PWA besteht aus mehreren festen Bausteinen:
- HTTPS: Alle PWA-Funktionalität funktioniert nur über eine sichere Verbindung. Ein gültiges SSL-Zertifikat ist also Pflicht.
- Service Worker: eine separate JavaScript-Datei, die im Hintergrund läuft, Netzwerkanfragen abfängt und Dateien für die Offline-Nutzung zwischenspeichert.
- Web App Manifest: eine JSON-Datei mit Name, Icons, Startseite und Anzeigeeinstellungen, mit der der Browser weiß, wie die App installiert werden soll.
- Responsive Design: Die Benutzeroberfläche muss auf jeder Bildschirmgröße gut funktionieren.
Entwicklungstools, die du benötigst, sind ein Texteditor, Node.js für die Paketverwaltung und die Entwicklertools deines Browsers, um Service Worker und Manifest zu testen und zu debuggen.
Selbst eine PWA erstellen
Du kannst eine PWA mit Vanilla JavaScript oder mit einem Framework wie React, Vue oder Angular aufbauen, die jeweils integrierte Unterstützung für PWA-Strukturen bieten. Fange einfach an und erweitere danach.
Projektstruktur einrichten
Erstelle eine Grundstruktur mit HTML, CSS und JavaScript, ergänzt durch eine manifest.json und eine sw.js-Datei für den Service Worker.
Service Worker registrieren
Überprüfe in deinem Hauptskript, ob der Browser Service Worker unterstützt, und registriere die sw.js-Datei beim Laden der Seite.
Caching einrichten
Cache während der Installationsphase die wesentlichen Dateien (HTML, CSS, JS, Offline-Seite), damit die App auch ohne Verbindung funktioniert.
Manifest ausfüllen
Trage name, short_name, start_url, Anzeigemodus, Theme- und Hintergrundfarbe sowie Icon-Formate ein, damit die App installierbar wird.
Im Browser testen
Nutze die Entwicklertools, um zu prüfen, ob der Service Worker aktiv ist, das Manifest korrekt erkannt wird und die Installation möglich ist.
Hosten und veröffentlichen
Da HTTPS eine harte Voraussetzung ist, benötigst du Hosting mit einem funktionierenden SSL-Zertifikat. Viele Hosting-Pakete bieten kostenloses SSL über Let’s Encrypt an, das du direkt im Verwaltungspanel aktivieren kannst. Überprüfe in Plesk, ob SSL für deine Domain aktiv ist und ob Dateien wie das Manifest und der Service Worker korrekt ausgeliefert werden, ohne Cache-Probleme.
Achte auch auf die Serverkonfiguration: Ein Service Worker muss vom Root deiner Domain aus verfügbar sein, um den vollständigen Geltungsbereich der App abdecken zu können. Stelle sicher, dass deine Hosting-Umgebung schnell reagiert, denn die Ladezeit bleibt auch bei einer PWA entscheidend für das Erlebnis. Wenn du Zweifel an deiner aktuellen Umgebung hast, schau dir Webhosting mit NVMe-Speicher und LiteSpeed an und sichere dir gleich eine passende Domain über Domainnamen. Möchtest du von einem anderen Anbieter wechseln, informiere dich über die Möglichkeiten, zu Tandata zu wechseln.
Häufig gestellte Fragen
Brauche ich einen App Store, um eine PWA zu veröffentlichen?
Nein, eine PWA wird direkt von der Website über den Browser installiert, ohne Umweg über einen App Store.
Funktioniert eine PWA sowohl auf Android als auch auf iOS?
Ja, wobei der Grad der Unterstützung je nach Betriebssystem und Browser variiert. Teste die Installation und die Offline-Funktionalität immer auf mehreren Geräten.
Ist HTTPS wirklich Pflicht?
Ja, Service Worker und damit die gesamte PWA-Funktionalität funktionieren nur über eine sichere HTTPS-Verbindung.
Kann ich eine bestehende Website in eine PWA umwandeln?
Ja, du fügst der bestehenden Website ein Manifest und einen Service Worker hinzu. Der zugrunde liegende Inhalt und die Struktur bleiben meist unverändert.
Brauche ich ein separates Framework?
Nein, eine PWA kann mit Vanilla JavaScript erstellt werden. Frameworks machen den Prozess manchmal schneller dank integrierter PWA-Unterstützung.
Fazit
Eine Progressive Web App bietet Unternehmern ein app-ähnliches Erlebnis ohne die Komplexität der nativen App-Entwicklung. Mit HTTPS, einem Service Worker und einem Manifest legst du die Grundlage, und mit dem richtigen Hosting sorgst du dafür, dass die App schnell und zuverlässig funktioniert.