Marcus Milkereit is a German web developer. Recently he held a lecture in our meetup space about Progressive Web Apps - PWA.

1. Progressive Web Apps
are here to stay
27 February 2018

2. Overview
• Introducing the speaker
• A short history of the web … and then came the iPhone
• What defines a PWA?
• Making web projects better - start with PWA now
• Future steps - around the corner

3. Main focus today:
better web projects using
PWA techniques

4. Introducing the speaker
• Markus Milkereit, 38
• passionate Full Stack developer for 15 years
• almost 10 years as a freelancer / various agencies
• 6 years at Magmell Studio, Heilbronn (Germany)
• since July 2017 CEO of Magmell d.o.o., Novi Sad
• favorite topic: making the web fast and usable

5. Introducing Magmell
• founded in 1999 by 3 friends, reinvented in 2017
• creative studio with film, foto, design and web
• digital and emotional ass-kicking
• Contao CMS Premium Partner
• Novi Sad office opened July 2017

6. A short history of the web
• static web pages, HTML with tables 1993 - well into 2000
• CSS introduced in 1996, CSS Zen Garden 2003
• interaction: Java Applets, Javascript, Flash
• web layout sizes grow, stay static up to roughly 2010
• first soft steps into responsive web 2001, broad usage from 2013 onwards

7. source: https://en.wikipedia.org/wiki/I-mode#/media/File:Mobile_Web_Standards_Evolution_Vector.svg

8. ... and then came the iPhone (2007)
• first mass market, usable touchscreen smartphone
• full web capabilities (no WAP, iMode ...)
• first interesting use case for viewports, media queries
• no app support in the beginning - »that's what the web is for«
• AppStore + SDK started a year later (July 2008)

9. next chapter: Progressive Web Apps
• 100% web based apps
• usable as website, desktop and mobile app
• single tech stack
• much less work in development, operation and maintenance
• much easier communications based on »single interface«

10. What defines a PWA?
• Progressive, Responsive, Connectivity independent, App-like,
Fresh, Safe, Discoverable, Re-engageable, Installable, Linkable
• the base requirement is very compact:
1. HTTPS based website
2. Uses at least one service worker
3. Has a Web App Manifest

11. Making web projects better:
start with PWA now
• every step on the way is an improvement:
1. HTTPS, always encrypted - slowly becoming standard MO
2. service workers: a lot of steps are universally beneficial
speed optimization & usability improvements
3. writing a Web App Manifest? No work at all
https://www.pwabuilder.com/generator

12. Main goal: make it feel like an app
• pagespeed optimization, a lot
• special care: mobile pagespeed optimization
• support speedup work with service workers
• enhance functionality with service workers
• offline handling with service workers
• sometimes helpful: »fake it till you make it«
12

13. What is a service worker?
• locally running helper tool in the browser
• written in Javascript
• can be installed / registered
• no limited lifetime (*)
• can work in the background
• has access to the »new« browser APIs like Web Storage / localStorage

15. Overview of service workers
• minimum service worker: send status 200 even when you are offline
• handle push notifications
• cache images and other resources
• cache whole pages, content and assets
• prefetch images, assets, content elements and pages
• nicely handle being offline (offline storage etc.)
... many, many examples available

16. Progressive enhancement
• has been around for a long time
• because of the different adaption rates of browsers for API access,
service workers etc. still the way to go (it's in the name, stupid)
• even older browsers get positive results, without supporting a lot of
the specific changes (see: Washington Post)

17. Future steps - around the corner
• PWA can already be bundled for Google Play Store
• Microsoft combed through the web in January 2018 to start including PWA in
the Microsoft Store
• Apple starts supporting PWA features and service workers in the upcoming
iOS 11.3 (March or April)
• heavy development still in progress - Apple handles service workers
differently from all the others (*auto-deleting service workers after a while)

18. That's it folks,
time for questions

19. Sources (excerpt) a.k.a. where to go next
Articles
https://www.smashingmagazine.com/2018/02/native-and-pwa-choices-not-challengers/ (Feb. 2018)
http://alistapart.com/article/yes-that-web-project-should-be-a-pwa (Aug. 2017)
https://cloudfour.com/thinks/ios-doesnt-support-progressive-web-apps-so-what/ (Oct. 2016)
https://www.washingtonpost.com/pr/wp/2016/09/06/the-washington-post-to-roll-out-fastest-mobile-news-site/ (Sep 2016)
Manuals / Definitions:
https://serviceworke.rs/ (supported by Mozilla)
https://developers.google.com/web/fundamentals/primers/service-workers/ (Google)
https://developer.mozilla.org/en-US/docs/Web/Manifest
https://en.wikipedia.org/wiki/Progressive_web_app#Characteristics
Tools:
https://www.pwabuilder.com/generator (supported by Microsoft)
https://whatwebcando.today/

20. Upcoming meetups
• Page speed optimization: only a fast website is a good website
• Contao CMS introduction: content management is only the
beginning
• User Experience driven development: the frontend takes over
... many more to come