Progressive Web Apps Initiative

Summary

Progressive Web Apps are a hot topic currently. It allows mobile websites to look and feel like native apps, work offline or be installable and more. TYPO3 should make it easy to build progressive web applications. What is also worth mentioning is that the PWA technology is promoted by Google as a best practice for the web applications.

Already Done

There are 2 ways to introduce PWA to your TYPO3 website:
Add PWA capabilities to an existing Fluid based website
The website is enriched with an PWA manifest and ServiceWorker. We have provided an extension which adds PWA related configuration to the site configuration and kickstarts PWA supports for you: https://github.com/TYPO3-Initiatives/pwa_manifest
The EXT:pwa_manifest allows you to start experimenting with PWA in 5minutes.

Use TYPO3 as Headless CMS (a microservice) providing content, and build an JS application which consumes the API and renders the HTML server and client side.
To start experimenting with this approach use our demo package:
https://github.com/TYPO3-Initiatives/pwa-demo

For this approach we've build a technology stack:
https://github.com/TYPO3-Initiatives/headless (JSON API providing content)
https://github.com/TYPO3-Initiatives/nuxt-typo3 (a base for a JS application written in vue.js)

If you want to use EXT:news in your headless TYPO3 installation, you will like the https://github.com/TYPO3-Initiatives/headless_news which adds support JSON output to News.

To quickly kickstart a new frontend (JavaScirpt) project/application using nuxt-typo3 use a console command we've build https://github.com/TYPO3-Initiatives/create-nuxt-typo3

Further Goals

Provide default rendering for all TYPO3 content elements (e.g. Forms)
Handler offline form submission
Handle push notifications

Work with the Persistance Initiative on GraphQL integration

Timing

Target for new features is v10. The solution will be developed as an extension first.

Milestones

Research
Provide way to store PWA related configuration
Simple content API
Frontend JS app consuming the api
Frontend routing
SEO and possibly pre-rendering

EXT: Headless

This extension provides backend part (JSON API) for TYPO3 PWA solution. The other part is an extension providing JavaScript rendering for content based on Vue.js and Nuxt

EXT:Headless on Github

Meet us in real life:

TYPO3 Camp Venlo https://www.webcampvenlo.nl/program (12.03 - 14.03.2020). Presentation about headless approach and PWA will be held on Saturday and a workshop on Sunday.