Progressive Web Apps in TYPO3: Implementation Guide for 2026

pwa_manifest support for TYPO3 v13 and v14 is not verified from the referenced repository and should not be claimed. The official Extension Repository also shows older pwa_manifest metadata, so readers should check the repository, Composer constraints and changelog before upgrading.github+2

Install and Configure the TYPO3 PWA Extension

Installation

For TYPO3 v11, use the compatible 1.x branch:

bash

composer require friendsoftypo3/pwa_manifest:^1.0

For TYPO3 v12, use the compatible 2.x branch:

bash

composer require friendsoftypo3/pwa_manifest:^2.0

After installation:

1. Activate the extension.
2. Include its TypoScript, if required by the selected version.
3. Open Site Management → Sites → Site Configuration.
4. Add the manifest details, icons, colors and display settings.
5. Open the generated manifest URL and confirm that it returns HTTP 200 with valid JSON.
6. Check the browser’s Application or Manifest panel for errors.

For multisite, language, domain and subpath installations, verify tart_url, scope, asset paths and manifest output separately for every site. Test the change in staging first and keep the previous Composer lock file and configuration available for rollback.

Compatibility warning: “Works” should be shown only for a TYPO3 and extension combination confirmed in the repository or release documentation. Use “Not verified” for TYPO3 v13 and v14 until supporting evidence is available.

Configure the Web App Manifest

Retain the existing manifest.json example and explain the key fields briefly:

Use a valid manifest link in the document head:

xml

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

Validate the manifest URL, JSON syntax, icon responses, start_url and scope in browser developer tools. The manifest controls installation and launch behavior; it is not a direct search-ranking factor.

Add a Service Worker to TYPO3

A service worker runs separately from the main page and can intercept requests, store resources in a cache and provide selected offline behavior. A manifest without a service worker does not provide the complete offline and background experience associated with a PWA.developer.mozilla+1

Cover these implementation points:

• Register the worker from the correct path and scope.
• Use cache-first for stable static assets.
• Use network-first for changing TYPO3 pages.
• Use stale-while-revalidate where fast delivery and background freshness are both useful.
• Add an offline fallback page for failed navigation requests.
• Exclude /typo3, login, checkout, account and personalised routes from unsuitable caching.
• Version caches during deployment and delete obsolete cache versions.
• Test installation, updates, rollback and stale-content behavior.
• Inform users when a new service-worker version is ready, where appropriate.

The correct caching strategy depends on the content. Cache-first is useful for stable assets but can return stale responses; network-first is generally safer for frequently updated TYPO3 content.

Build an Offline Experience Safely

A TYPO3 PWA should not make the entire website available offline by default. Define the exact pages and functions that users can access without a network connection.

• Cache static assets such as CSS, JavaScript, fonts and selected images.
• Separate public content from private, authenticated and personalised content.
• Provide an offline fallback page with a retry or reconnect action.
• Handle failed form submissions clearly; do not silently discard user data.
• Never serve outdated prices, stock levels, account details or event information as current.
• Test the first visit, repeat visit, offline visit and visit after a new deployment.

Performance, Accessibility and Progressive Enhancement

Retain the original principles—Fast, Reliable, Engaging and Responsive—but connect them to measurable results.

• Measure Core Web Vitals with both laboratory tools and real-user data.developers.google+1
• Optimize images, use lazy loading, limit font variations and reduce unnecessary JavaScript.
• Test keyboard navigation, screen readers, colour contrast and reduced-motion preferences.
• Ensure essential TYPO3 content works without JavaScript, installation or offline access.
• Compare page-level performance, task completion and engagement before and after PWA implementation.
• Avoid unsupported claims such as guaranteed rankings, conversions or loading times.

Browser Support and Installation Behaviour

PWA features differ by browser, operating system and device. Treat the following as a July 2026 testing baseline, not a universal guarantee:

Use feature detection instead of assuming support. On iOS, push notifications require an installed PWA, while Background Sync remains limited; provide a foreground-sync alternative.magicbell+1

TYPO3 Headless and JavaScript Frontend Options

TYPO3 Headless provides a JSON API so a separate frontend—such as Nuxt, Vue, React or another JavaScript application—can render TYPO3 content. The frontend remains responsible for routing, rendering, manifest configuration, service-worker logic, caching and offline behavior.typo3+1

Add API caching and revalidation, preview support, editorial workflows, server-side rendering and crawlability to the implementation plan. A traditional TYPO3 frontend is often preferable for content-focused websites because it is simpler to maintain, while Headless TYPO3 suits highly interactive applications and multi-channel delivery.

Check Headless TYPO3 compatibility separately from pwa_manifest. The Extension Repository lists Headless versions for TYPO3 12.4 and 13.4, but this does not confirm PWA compatibility for every setup.extensions.typo3

Security, Privacy and Maintenance

• Deliver the website and service worker securely over HTTPS.
• Never cache authenticated, personalised or sensitive responses without a carefully reviewed strategy.
• Review cache poisoning, stale-cache and invalidation risks.
• Configure Content Security Policy and audit third-party scripts.
• Obtain consent for push notifications and provide an unsubscribe option.
• Monitor storage usage and allow users to clear local data.
• Track failed service-worker registrations and update errors.
• Maintain deployment, rollback and emergency cache-reset procedures.

Test and Debug a TYPO3 PWA

Use this checklist before release:

• Validate the manifest and icon URLs.
• Confirm service-worker registration and scope.
• Test installability on target browsers.
• Check offline navigation and cache contents.
• Test new deployments, cache updates and rollback.
• Test slow, interrupted and restored networks.
• Test Chrome Android, desktop browsers, iOS and other target devices.
• Run Lighthouse or an equivalent audit.
• Test keyboard access, screen readers, contrast and reduced motion.
• Verify TYPO3 cache clearing and deployment behaviour.
• Confirm analytics attribution for installed-app sessions.

Common TYPO3 PWA Problems and Fixes

TYPO3 PWA Implementation Checklist

Discovery and planning

• Define the user journeys that benefit from PWA features.
• Identify pages that must work offline.
• Decide whether a traditional, hybrid or headless frontend is suitable.

Technical implementation

• Confirm TYPO3 and extension compatibility.
• Configure and validate the Web App Manifest.
• Register the service worker with the correct scope.
• Define caching, offline and cache-invalidation rules.
• Exclude private and transactional content.

Quality and launch

• Measure Core Web Vitals.
• Test accessibility and progressive enhancement.
• Test installation on target browsers and devices.
• Review HTTPS, CSP, privacy and notification consent.
• Prepare deployment, monitoring, rollback and cache-reset procedures.

Conclusion

A TYPO3 PWA should be planned around specific user journeys rather than added as a feature checklist. Start with compatibility and offline requirements, then implement the manifest, service worker, caching rules, performance improvements and browser testing in controlled stages.