Voxxed Athens 2018 - Getting real with progressive web apps in 2018
1 like347 views
This document discusses progressive web apps (PWAs) and provides steps to build one. It notes that 2018 is the year of the rise of PWAs as core technologies like service workers are now supported by major browsers. It then outlines 6 steps to build a PWA, including setting up HTTPS, registering a service worker to handle caching and offline capabilities, adding a web app manifest for installation prompts, and using additional features like push notifications. It acknowledges that mature tools and libraries exist to simplify the PWA development process.
Voxxed Athens 2018 - Getting real with progressive web apps in 2018
- 1. Getting Real with Progressive Web Apps in 2018 Max GJ Panas - Principal Software Engineer @ Camelot Global @mgjp_
- 2. 2018 is the year of the @mgjp_
- 3. Rise of the PWAs@mgjp_
- 5. 90% smaller than Android App 60%increase in core-engagements 44%increase in user-generated ad revenue 104% improvement in conversions 74%more time spent per session Stats from https://www.pwastats.com/@mgjp_
- 6. Web Tech in 2018 Service Workers Fetch Payments API Add To Homescreen ES Modules Auth API Web Components Web Assembly Web Workers Notifications API @mgjp_
- 7. ALL major browsers support the Core PWA Technologies @mgjp_
- 8. Browser Compatibility Table from https://www.youtube.com/watch?v=NITk4kXMQDw&t=381s
- 10. Progressive Web Apps: Escaping Tabs Without Losing Our Soul By Alex Russell, Frances Berriman June 2015 @mgjp_
- 11. ESCAPING THE TAB: PROGRESSIVE, NOT HYBRID ● Responsive ● Connectivity independent ● App-like-interactions ● Fresh ● Safe ● Discoverable ● Re-engageable ● Installable ● Linkable @mgjp_
- 12. Service Worker is the backbone of PWA technology @mgjp_
- 14. 1. Address existing pain points @mgjp_
- 19. 1. Address Existing Pain Points Use the existing tools and best practices - Responsive Web Design - Web Performance (First Meaningful Paint, Time to Interactive, Eliminating Jank, PRPL) - Accessibility & Semantic Markup - Progressive Enhancement @mgjp_
- 20. 2. If not on HTTPS, get on it now! @mgjp_
- 21. 3. Setup a Service Worker @mgjp_
- 22. A Service Worker is your JS code, running in the browser separately from your site @mgjp_
- 23. Since your site talks to the Service Worker, it doesn’t need to know about the network @mgjp_
- 24. Since the Service Worker can run in the background it doesn’t need your site @mgjp_
- 26. Control Scope defaults to being relative to the path of the service worker script file. You can override this by passing in the scope attribute to the serviceWorker.register method. 3.1 Where to put it my-first-pwa/ index.html main.css main.js sw.js @mgjp_
- 29. 3.3 Get it to handle requests my-first-pwa/ index.html main.css main.js sw.js @mgjp_
- 31. 3.3 Try to get from the Cache my-first-pwa/ index.html main.css main.js sw.js @mgjp_
- 32. 3.3 Use Cache version if it exists my-first-pwa/ index.html main.css main.js sw.js @mgjp_
- 33. 3.3 Else fetch it from the Network my-first-pwa/ index.html main.css main.js sw.js @mgjp_
- 34. 3.3 Save it to the Cache my-first-pwa/ index.html main.css main.js sw.js @mgjp_
- 35. Our Request Handling Strategy @mgjp_
- 36. 3.4 (Optional) Early Cache Population my-first-pwa/ index.html main.css main.js sw.js @mgjp_
- 37. 3.5 (Optional) Claim the client my-first-pwa/ index.html main.css main.js sw.js @mgjp_
- 38. 4. Create the Web App Manifest @mgjp_
- 39. 4.1 Link it in the Head my-first-pwa/ index.html main.css main.js manifest.json sw.js @mgjp_
- 40. 4.2 Give it a Name my-first-pwa/ index.html main.css main.js manifest.json sw.js @mgjp_
- 41. 4.3 Give it style my-first-pwa/ index.html main.css main.js manifest.json sw.js @mgjp_
- 42. 4.4 Fullscreen or Standalone my-first-pwa/ index.html main.css main.js manifest.json sw.js @mgjp_
- 43. 4.5 Where to begin my-first-pwa/ index.html main.css main.js manifest.json sw.js @mgjp_
- 45. 5. Add to Homescreen @mgjp_
- 46. It Already Works! But… It’s about to change, slightly. Animated gif of add to home screen banner in Chrome from Google Developers.@mgjp_
- 47. 5.1 Control the Install Prompt my-first-pwa/ index.html main.css main.js manifest.json sw.js @mgjp_
- 48. 6. The rest is up to you! ● Push Notifications ● Web Auth / Credentials Management API ● Web Payments API ● And more... @mgjp_
- 49. THIS IS TOO HARD! Or, is it? @mgjp_
- 50. Mature Tooling, Libraries, Guides and Tuts ● Let’s Encrypt - SSL Certificate Authority - for HTTPS ● Microsoft’s PWA Builder - Wizard - for Web App Manifest & Service Workers ● Google’s Workbox - Library - for Service Workers ● And more… (eg: Google’s Lighthouse) @mgjp_
- 51. Desktop @mgjp_
- 54. THANK YOU @mgjp_