Progressive Web Apps: The new normal

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.

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

June 24, 2017
Tweet

Transcript

  1. None
  2. @addyosmani

  3. None
  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?
  22. None
  23. None
  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
  26. None
  27. None
  28. Preact Polymer Vue.js

  29. reactjs.com

  30. None
  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

  36. None
  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

  43. None
  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/

  49. None
  50. +AddyOsmani @addyosmani developers.google.com/web Learn More: