Pwa february 2018
0 likes209 views
The document discusses the importance and benefits of progressive web apps (PWAs), highlighting their features such as being responsive and connectivity independent. It covers the evolution of web technologies leading to PWAs, introduces service workers, and outlines steps for improving web projects with PWA techniques. The speaker, Markus Milkereit, emphasizes that starting with PWAs can enhance web development and user experience significantly.
Pwa february 2018
- 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
- 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