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 TYPO Headless & PWA, 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 transform TYPO3 CMS into Headless CMS. 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 license.
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 TYPO3 Headless & PWA.
- 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 Lilighthouse 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 an existing page based on fluid, then you can just change the TypoScript template and render JSON from your content. You don’t need to migrate your data and build a new website.
The TYPO3 Headless & 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 different tech, say, React — that’s also possible.
You don’t have to implement it on your own.
The TYPO3 Headless & PWA module is an open-source and extensively-documented solution, that’s 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 experienced team.
Read more about the available support packages.