Progressive Web Application for TYPO3.

1. Unlock Innovation
Progressive Web
Application for TYPO3
Tymoteusz Motylewski, CTO
@macopediapl, macopedia.com

2. 1999
Internet in NOKIA

3. 2000
Public Beta TYPO3

4. 2007
Iphone Premier

5. 2019
Iphone 11 Pro

6. Mobile vs Desktop (2009-2019)

7. 2019
Where’s NOKIA?

8. 2019
TYPO3 v10

9. TYPO3
is
constantly
looking for
innovation

10. Top Challenge for 2020?

11. Top Challenge for 2020?
Provide excellent experience
for mobile users.

12. What do mobile
users expect?

14. Almost 90% of time is spent on mobile apps

15. Why?
Because users love the app
experience.

16. They are fast

17. They are
integrated

18. They are reliable

19. They are
engaging

20. Let’s provide native
app experience
to the web

22. PWA
radically
improved user
experience

23. PWA
Capabilities

24. Offline mode
supported
Reliable

25. Home screen
icon
Integrated

26. Splashscreen
Integrated

27. Full screen
Integrated

28. Push
notifications
Engaging

29. Access to device
features
Integrated

30. Background
worker and
cache
Fast & Reliable

31. The solution is
ready and it’s
waiting for you.
+

32. TYPO3 Progressive Web App Initiative

34. `````````````````
`````````````````
`
github.com/TYPO3-Initiatives/headless
`````````````````
`````````````````
`
github.com/TYPO3-Initiatives/nuxt-typo3
Fronted Vue.js app
TYPO3 Headless Extension

35. TYPO3 PWA v1.0
Same TYPO3 Backend - nothing changes here
TYPO3 based routing
Multilingual support
Respects permissions and content visibility

36. TYPO3 PWA v1.0
TYPO3 SEO features included
No data/structure migration
Truly Open-Source
SSR - Server side rendering

37. TYPO3 PWA v1.0
Easy to integrate custom CE’s and extensions
Caching visited pages
Offline mode
Support for EXT:news

38. Production
ready

39. Case study

40. Macmillan Education
Major educational publishing company
Global publisher operating in over 120 countries
worldwide.

41. Challenge
Translate complex content structure into a mobile-first
app that’s engaging and easy to navigate.
The platform had to be tailored to the needs of multiple
local Macmillan Education teams.

42. Macmillan English

44. Let’s see some numbers

45. Green Google Lighthouse

46. 55% faster
First Meaningful Paint
from 3,8 s to 1,7s

47. 60,8% faster
Time to interactive
from 12,5 s to 4,9s

48. 60% smaller
Download size
from 4MB s to 1.6MB

49. Join the Progressive Web
App Initiative!
#initiative-pwa on slack

50. See the demo
and talk to the team
at Macopedia booth.

51. Thank you for attention!
Tymoteusz Motylewski
@tmotyl
t.motylewski@macopedia.com

52. Thank you for attention!
Tymoteusz Motylewski
@tmotyl
t.motylewski@macopedia.com

53. Sources:
https://mindsea.com/app-stats/
https://medium.com/@distillerytech/digital-transformation-why-enterprises-need-progressive-web-apps-b37a9e223157
https://buildfire.com/app-statistics/
https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/2019