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
 
And check out our work in progress documentation:
https://typo3-initiatives.github.io/nuxt-typo3

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

Image about timing (calendar)

Timing

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

Milestones

  1. Research
  2. Provide way to store PWA related configuration
  3. Simple content API
  4. Frontend JS app consuming the api
  5. Frontend routing
  6. 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:

Related Initiatives:

Get involved!

Team

Tymoteusz Motylewski (Lead)

Adam Marcinkowski

Łukasz Uznański

You?