Progressive Web Apps in TYPO3: Implementierungsleitfaden für 2026

Die Unterstützung von pwa_manifest für TYPO3 v13 und v14 ist im referenzierten Repository nicht verifiziert und sollte daher nicht behauptet werden. Das offizielle Extension Repository zeigt ebenfalls ältere pwa_manifest-Metadaten. Leser sollten daher vor einem Upgrade das Repository, die Composer-Anforderungen und das Changelog prüfen.github+2

TYPO3 PWA Extension installieren und konfigurieren

Installation

Für TYPO3 v11 verwenden Sie den kompatiblen 1.x-Zweig:

bash

composer require friendsoftypo3/pwa_manifest:^1.0

Für TYPO3 v12 verwenden Sie den kompatiblen 2.x-Zweig:

composer require friendsoftypo3/pwa_manifest:^2.0

Nach der Installation:

1. Aktivieren Sie die Extension.
2. Binden Sie das TypoScript ein, falls dies für die ausgewählte Version erforderlich ist.
3. Öffnen Sie Site Management → Sites → Site Configuration.
4. Fügen Sie die Manifest-Details, Icons, Farben und Anzeigeeinstellungen hinzu.
5. Öffnen Sie die generierte Manifest-URL und prüfen Sie, ob sie HTTP 200 mit gültigem JSON zurückgibt.
6. Prüfen Sie das Application- oder Manifest-Panel des Browsers auf Fehler.

Bei Multisite-, Sprach-, Domain- und Subpath-Installationen sollten Sie start_url, scope, Asset-Pfade und die Manifest-Ausgabe für jede Website separat überprüfen. Testen Sie die Änderung zunächst in der Staging-Umgebung und halten Sie die vorherige Composer-Lock-Datei sowie die Konfiguration für einen möglichen Rollback bereit.

Kompatibilitätshinweis: „Funktioniert“ sollte nur für eine TYPO3- und Extension-Kombination angegeben werden, die im Repository oder in der Release-Dokumentation bestätigt wurde. Verwenden Sie für TYPO3 v13 und v14 „Nicht verifiziert“, solange keine entsprechenden Nachweise vorliegen.

Web App Manifest konfigurieren

Behalten Sie das bestehende Beispiel manifest.json bei und erklären Sie die wichtigsten Felder kurz:

Verwenden Sie einen gültigen Manifest-Link im <head> des Dokuments:

xml

<link rel="manifest" href="/manifest.json">

Validieren Sie die Manifest-URL, die JSON-Syntax, die Icon-Antworten, start_url und scope in den Entwickler-Tools des Browsers. Das Manifest steuert das Installations- und Startverhalten. Es ist kein direkter Rankingfaktor für Suchmaschinen.

Einen Service Worker zu TYPO3 hinzufügen

Ein Service Worker läuft unabhängig von der Hauptseite und kann Anfragen abfangen, Ressourcen in einem Cache speichern und ausgewählte Offline-Funktionen bereitstellen. Ein Manifest ohne Service Worker bietet nicht das vollständige Offline- und Hintergrund-Erlebnis, das mit einer PWA verbunden ist.developer.mozilla+1

Behandeln Sie bei der Implementierung folgende Punkte:

• Registrieren Sie den Worker über den korrekten Pfad und Gültigkeitsbereich.
• Verwenden Sie Cache-first für stabile statische Ressourcen.
• Verwenden Sie Network-first für sich ändernde TYPO3-Seiten.
• Verwenden Sie Stale-while-revalidate, wenn sowohl eine schnelle Bereitstellung als auch Aktualisierungen im Hintergrund sinnvoll sind.
• Fügen Sie eine Offline-Fallback-Seite für fehlgeschlagene Navigationsanfragen hinzu.
• Schließen Sie /typo3, Login-, Checkout-, Konto- und personalisierte Routen vom ungeeigneten Caching aus.
• Versionieren Sie Caches während des Deployments und löschen Sie veraltete Cache-Versionen.
• Testen Sie Installation, Updates, Rollback und das Verhalten veralteter Inhalte.
• Informieren Sie Nutzer gegebenenfalls darüber, wenn eine neue Service-Worker-Version bereitsteht.

Die richtige Caching-Strategie hängt von den Inhalten ab. Cache-first eignet sich für stabile Ressourcen, kann aber veraltete Antworten liefern. Network-first ist im Allgemeinen sicherer für häufig aktualisierte TYPO3-Inhalte.

Eine sichere Offline-Erfahrung aufbauen

Eine TYPO3 PWA sollte nicht standardmäßig die gesamte Website offline verfügbar machen. Legen Sie genau fest, auf welche Seiten und Funktionen Nutzer ohne Netzwerkverbindung zugreifen können.

• Cachen Sie statische Ressourcen wie CSS, JavaScript, Schriftarten und ausgewählte Bilder.
• Trennen Sie öffentliche Inhalte von privaten, authentifizierten und personalisierten Inhalten.
• Stellen Sie eine Offline-Fallback-Seite mit einer Aktion zum erneuten Laden oder Wiederverbinden bereit.
• Behandeln Sie fehlgeschlagene Formularübermittlungen klar und verständlich. Nutzerdaten dürfen nicht unbemerkt verworfen werden.
• Stellen Sie niemals veraltete Preise, Lagerbestände, Kontodaten oder Veranstaltungsinformationen als aktuell dar.
• Testen Sie den ersten Besuch, wiederholte Besuche, Offline-Besuche und Besuche nach einem neuen Deployment.

Performance, Barrierefreiheit und Progressive Enhancement

Behalten Sie die ursprünglichen Prinzipien Schnell, zuverlässig, ansprechend und responsiv bei, verbinden Sie diese jedoch mit messbaren Ergebnissen.

• Messen Sie Core Web Vitals sowohl mit Labortools als auch mit Daten realer Nutzer.developers.google+1
• Optimieren Sie Bilder, verwenden Sie Lazy Loading, begrenzen Sie Schriftvarianten und reduzieren Sie unnötiges JavaScript.
• Testen Sie Tastaturnavigation, Screenreader, Farbkontraste und Einstellungen für reduzierte Bewegungen.
• Stellen Sie sicher, dass wichtige TYPO3-Inhalte auch ohne JavaScript, Installation oder Offline-Zugriff funktionieren.
• Vergleichen Sie die Performance auf Seitenebene, die Aufgabenerfüllung und das Engagement vor und nach der PWA-Implementierung.
• Vermeiden Sie nicht belegte Aussagen wie garantierte Rankings, Conversions oder Ladezeiten.

Browser-Unterstützung und Installationsverhalten

PWA-Funktionen unterscheiden sich je nach Browser, Betriebssystem und Gerät. Betrachten Sie die folgenden Angaben als Testgrundlage für Juli 2026 und nicht als allgemeingültige Garantie:

Verwenden Sie Feature Detection, anstatt Unterstützung vorauszusetzen. Unter iOS benötigen Push-Benachrichtigungen eine installierte PWA, während Background Sync weiterhin eingeschränkt ist. Bieten Sie daher eine Alternative zur Synchronisierung im Vordergrund an.magicbell+1

TYPO3 Headless und JavaScript-Frontend-Optionen

TYPO3 Headless stellt eine JSON-API bereit, sodass ein separates Frontend wie Nuxt, Vue, React oder eine andere JavaScript-Anwendung TYPO3-Inhalte darstellen kann. Das Frontend bleibt für Routing, Darstellung, Manifest-Konfiguration, Service-Worker-Logik, Caching und Offline-Verhalten verantwortlich.typo3+1

Ergänzen Sie den Implementierungsplan um API-Caching und -Revalidierung, Vorschau-Unterstützung, redaktionelle Workflows, serverseitiges Rendering und Crawlbarkeit. Ein herkömmliches TYPO3-Frontend ist für inhaltsorientierte Websites häufig die bessere Wahl, da es einfacher zu warten ist, während sich Headless TYPO3 für hochgradig interaktive Anwendungen und die Bereitstellung auf mehreren Kanälen eignet.

Prüfen Sie die Kompatibilität von Headless TYPO3 separat von pwa_manifest. Das Extension Repository listet Headless-Versionen für TYPO3 12.4 und 13.4, dies bestätigt jedoch nicht die PWA-Kompatibilität für jedes Setup.extensions.typo3

Sicherheit, Datenschutz und Wartung

• Stellen Sie die Website und den Service Worker sicher über HTTPS bereit.
• Cachen Sie niemals authentifizierte, personalisierte oder sensible Antworten ohne eine sorgfältig geprüfte Strategie.
• Prüfen Sie Risiken durch Cache Poisoning, veraltete Caches und fehlerhafte Cache-Invalidierung.
• Konfigurieren Sie die Content Security Policy und überprüfen Sie Skripte von Drittanbietern.
• Holen Sie die Zustimmung für Push-Benachrichtigungen ein und bieten Sie eine Möglichkeit zum Abbestellen an.
• Überwachen Sie die Speichernutzung und ermöglichen Sie Nutzern, lokale Daten zu löschen.
• Verfolgen Sie fehlgeschlagene Service-Worker-Registrierungen und Update-Fehler.
• Halten Sie Verfahren für Deployment, Rollback und das Zurücksetzen von Caches im Notfall bereit.

Eine TYPO3 PWA testen und debuggen

Verwenden Sie diese Checkliste vor der Veröffentlichung:

• Validieren Sie das Manifest und die Icon-URLs.
• Bestätigen Sie die Registrierung und den Gültigkeitsbereich des Service Workers.
• Testen Sie die Installierbarkeit in den Zielbrowsern.
• Prüfen Sie die Offline-Navigation und den Inhalt des Caches.
• Testen Sie neue Deployments, Cache-Updates und Rollbacks.
• Testen Sie langsame, unterbrochene und wiederhergestellte Netzwerkverbindungen.
• Testen Sie Chrome auf Android, Desktop-Browsern, iOS und anderen Zielgeräten.
• Führen Sie Lighthouse oder ein vergleichbares Audit durch.
• Testen Sie den Tastaturzugriff, Screenreader, Kontrast und reduzierte Bewegungen.
• Überprüfen Sie das Verhalten beim Leeren des TYPO3-Caches und beim Deployment.
• Stellen Sie eine korrekte Zuordnung der Analytics-Daten für Sitzungen über installierte Apps sicher.

Häufige TYPO3-PWA-Probleme und Lösungen

TYPO3 PWA-Implementierungscheckliste

Entdeckung und Planung

• Definieren Sie die Nutzerabläufe, die von PWA-Funktionen profitieren.
• Identifizieren Sie Seiten, die offline funktionieren müssen.
• Entscheiden Sie, ob ein herkömmliches, hybrides oder Headless-Frontend geeignet ist.

Technische Implementierung

• Bestätigen Sie die Kompatibilität von TYPO3 und Extensions.
• Konfigurieren und validieren Sie das Web-App-Manifest.
• Registrieren Sie den Service Worker mit dem korrekten Gültigkeitsbereich.
• Definieren Sie Regeln für Caching, Offline-Nutzung und Cache-Invalidierung.
• Schließen Sie private und transaktionale Inhalte aus.

Qualität und Veröffentlichung

• Messen Sie die Core Web Vitals.
• Testen Sie Barrierefreiheit und Progressive Enhancement.
• Testen Sie die Installation in den Zielbrowsern und auf den Zielgeräten.
• Überprüfen Sie HTTPS, CSP, Datenschutz und die Zustimmung zu Benachrichtigungen.
• Bereiten Sie Verfahren für Deployment, Monitoring, Rollback und das Zurücksetzen des Caches vor.

Fazit

Eine TYPO3-PWA sollte anhand konkreter Nutzerpfade geplant werden und nicht einfach als Punkt auf einer Feature-Checkliste hinzugefügt werden. Beginnen Sie mit der Kompatibilität und den Offline-Anforderungen und implementieren Sie anschließend in kontrollierten Schritten das Manifest, den Service Worker, die Caching-Regeln, Leistungsverbesserungen und Browser-Tests.