Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Addy Osmani

June 24, 2017
Tweet

More Decks by Addy Osmani

Other Decks in Technology

Transcript

  1. Fast loading on slow networks
 Use less data Works well

    on smartphones https://mobile.twitter.com
  2. Android App 23 MB+ 100 MB+ 0.6 MB iOS App

    PWA https://mobile.twitter.com
  3. 65% increase
 pages/session 75% increase 
 in Tweets 1M
 Daily

    visits from homescreen icon https://mobile.twitter.com
  4. “By 2020, Progressive Web Apps will have replaced 50% of

    general-purpose consumer facing apps.” Gartner Research Source: Gartner post
  5. The bloat of your baseline defines how much headroom you

    have for app code. How much is taken up by your framework?
  6. 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
  7. ◦ 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
  8. 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
  9. ◦ 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
  10. 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