T3 Headless technology icon Transform your enterprise website into a Progressive Web App

Transform your enterprise website into a Progressive Web App

Headless TYPO3 & PWA Solution

Progressive Web Apps (PWA) have become popular because their benefits truly capture the imagination of business owners. Native-like browsing experience, SEO-friendliness, offline mode supported: PWAs are credited with improving conversion rates and boosting profits of brands. On the other hand, however, some businesses prioritize having a stable and secure environment for their platforms and thus choose to build upon reliable solutions like TYPO3. It’s an enterprise-grade CMS that’s flexible, yet secure, so it’s often the first choice for brands that opt for scalability.

At Macopedia, we wanted to address and solve this dilemma. We ended up launching TYPO3PWA, an opportunity to get the best of both worlds: a robust PWA based on a reliable CMS.

How does it work?

The main premise of TYPO3PWA is to render your TYPO3-based website in JSON files instead of HTML files. This, in turn, enables you to create a PWA app that’s suited for TYPO3. Let’s take a look at the main components of TYPO3PWA:

  • Headless - an extension that allows you to change how your TYPO3-powered backend behaves on the frontend (JSON files instead of HTML files). Headless supports all standard TYPO3 Content Elements, including the SEO-related fields. We’ve also provided support for news, solr and form extensions. 
  • A NuxtJS-based module, which you can use to render your frontend using Vue.js and Nuxt.  

Both models are open-source and published under the MIT licence. 

Why should you consider Headless TYPO3 PWA for your next project?

Businesses choose this solution because it empowers them to achieve two very important goals: creating a mobile-first user-friendly app, and not having to worry about the security or stability of the product. But these are not the only advantages of TYPO3PWA. 

  • Streamlined development process - especially when you have a solid UI Library you can use for multiple projects. 
  • Independent implementation of backend and frontend - you could even create a frontend app without having your TYPO3 CMS fully configured: just use another TYPO3 website as a data source.
  • Higher Google Lighthouse scores - it’s easier to get a “green score” in all categories listed by Google Lighthouse audit and, as a result, improve your rankings in search engines. 
  • Microservice architecture is possible - Headless TYPO3 PWA allows you to use microservice APIs, so you can, for example, add Sylius or Magento e-commerce features based on Oath and API. 
  • No data/structure migration - if you have existing page based on fluid, then you can just change typoscript template and you can render json from your content. You don’t need to migrate your data and build new website.

Headless TYPO3 & PWA initiative has received a warm welcome from the developers community, partially because it’s extremely flexible when it comes to creating the frontend of your app: depending on your development experience and preferred tools you can either rely on Storybook and the UI Library or develop a Vue.js app from scratch. If you prefer to use a different tech, say, React—that’s also possible. 

You don’t have to implement TYPO3PWA on your own!

The module  is an open-source and extensively-documented, meant to be used by development teams of different businesses. If you feel like you could use some external support, however, we’ve prepared several packages to support your PWA journey: from bespoke training options for your team or on-demand technical help to handing the whole implementation process to our team of TYPO3PWA experts. Read more about the available support packages here.

Read more about the available support packages.