Progressive Web Apps: The new normal

Addy Osmani's keynote explains why progressive web apps (PWAs) are becoming the new normal for fast, reengaging mobile web experiences for large brands such as Twitter, Lyft, and Forbes. Addy also explores how PWA support has massively improved in modern frameworks like React, Preact, Polymer, and Vue, lowering the barriers for developers and businesses to explore them.

Transcript

2. @addyosmani
4. 1 billion husband points
5. BET ON THE MOBILE WEB!IT CAN BE FAST, RELIABLE AND ENGAGING
6. 5B devices connected to web source: we are social
7. Progressive Web Apps:
 Radically better web experiences Reliable Fast Engaging
8. PWAs are added to homescreen in one tap https://www.trivago.co.uk/
9. Displayed in app launcher, and integrated into Android settings https://www.trivago.co.uk/
10. ride.lyft.com Lyft Download Size:
11. Fast loading on slow networks
 Use less data Works well on smartphones https://mobile.twitter.com
12. Fast, smooth scrolling https://mobile.twitter.com
13. Access media to tweet https://mobile.twitter.com
14. Receive notifications https://mobile.twitter.com
15. Android App 23 MB+ 100 MB+ 0.6 MB iOS App PWA https://mobile.twitter.com
16. 65% increase
 pages/session 75% increase 
 in Tweets 1M
 Daily visits from homescreen icon https://mobile.twitter.com
17. PWAs are a cross-browser initiative
18. https://lancome-usa.com
19. 53% increase in session length on iOS https://lancome-usa.com
20. “By 2020, Progressive Web Apps will have replaced 50% of general-purpose consumer facing apps.” Gartner Research Source: Gartner post
21. USE A JAVASCRIPT FRAMEWORK THAT GIVES YOU HEADROOM ON MOBILE! GETTING STARTED?
24. The bloat of your baseline defines how much headroom you have for app code. How much is taken up by your framework?
25. Plenty of lightweight options for mobile Lower total cost on size + parse times from the get-go
28. Preact Polymer Vue.js
29. reactjs.com
31. a zero configuration TOOL makes this all easier!
32. create-react-app now creates a PWA by default
33. Progressive Web App support Code-splitting with dynamic import() Webpack 2 Service Worker for offline caching Helpful overlay for uncaught errors Jest 20 create-react-app
34. Headroom for application code: 1.5s https://www.webpagetest.org/result/170503_25_5d1c63ea614dc8696e69f1e6d1de2bfb/
35. preactjs.com
37. ◦ 15% average improvement in TTI ◦ Median TTI of 5.5 seconds ◦ 24KB shaved off largest bundle ◦ 500ms script bootup on 3G ◦ React Router + React ◦ Used preact-compat for 2 months ◦ Mostly a drop-in
38. make your code, not your framework the largest part of your app!
39. PREACT CLI
40. 100/100 Lighthouse Automatic code-splitting across routes PRPL Service Worker for offline caching Built in tracking for bundle sizes Zero-config pre-rendering CLI
41. Headroom for application code: 3s https://www.webpagetest.org/result/170503_01_c3c6734aea4e13427fc2a8dacfc95a3c/ CLI
42. vuejs.org
44. ◦ Built with Vue.js 2.x & Webpack 2 for code-splitting ◦ Global event bus (but exploring Veux) ◦ Experimenting with Nuxt.js for component SSR ◦ Ads and images use AMP-style placeholders & lazy loading ◦ For larger images use WEBP with source-set for HiDPI displays ◦ Shipped <link rel=“preload”> support ◦ Service Worker caching Shell, JS, CSS and images with sw-precache
45. USE A PROGRESSIVE FRAMEWORK FOR PROGRESSIVE WEB APPS!
46. vue init pwa
47. Progressive Web App support Code-splitting with dynamic import() JS chunks preloaded or prefetched Service Worker for offline caching vue init pwa Version hashes for long-term caching Bundle size analytics npm run build --report
48. Headroom for application code: 2s https://www.webpagetest.org/result/170503_71_046b4347f08805859cb638d48e8831c2/
50. +AddyOsmani @addyosmani developers.google.com/web Learn More: