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

Offline-First Progressive Web Apps

Offline-First Progressive Web Apps

Slides from my talk at Software Architecture Conf 2016, on the Offline First architecture of Flipkart Lite.

Aditya Punjani

October 21, 2016
Tweet

Other Decks in Technology

Transcript

  1. Mobile is key focus area. • No. of new internet

    users in India in the last year alone was one third of United States population. • 34.8% Internet Penetration. • 81% of First Time Internet Users are only on Mobile. • India to become 2nd largest smart phone market by 2017. Source : Mary Meeker’s 2016 Internet Trends Report & Morgan Stanley Report
  2. • Poor User Experience. • Low Performance. • Lack of

    Engagement tools. Why we shut down our mobile website?
  3. • Browser Navigation Failures • Network Congestion • Low Signal

    • Battery Saver Mode • Thermal CPU Throttling • Limited Carrier Capacity • Server Outage • ISP failure Unpredictable Conditions
  4. Route Defined Route To Render Shell /:slug/p/:itemid → /slug/p/itemId →

    Product /(.*)/pr → /splat/pr → Browse /search → /search → Search /accounts/(.*) → /accounts/splat → Accounts Routes → HTML App Shells
  5. • Build Time heavy lifting. • Lightning fast Response times.

    • Long-term cache. • Reused across URLs. • Perceived Performance. • Fast and smooth Navigations. • Rich Interactivity. • App Like polished experience. Single Page App App Shells
  6. Service Worker • Highly Programmable Low level primitive. • Progressive

    Network Proxy in browser. • Sophisticated Caching policies. • Lives beyond the Browser Scope.
  7. Single Page App - Drawbacks • JS bundle is huge.

    • CSS bundle is huge. • Bad first load Performance.
  8. Benefits of Multiple SPAs • Smaller JS Bundles. • Smaller

    CSS Bundles. • Decoupled Deployments. • Navigations between SPAs allow SW update, Cache clean up, Heap Memory Clearing.
  9. Home Screen users covert 70% more. 3x more Home Screen

    additions. 40% more repeat visits.
  10. SEO with App Shells • Build a cross browser app.

    • Web Crawlers do execute JS. • Keep JS size small. • Embed SEO critical content in the App Shells. • Test using Webmaster tools.
  11. Cross Browser • Build for the Lowest common Browser engine.

    • Optimize for Most common Browser. • Polyfill / Feature detect every API. • Tone down Interactions / Animations for older browsers. • SW as a Progressive Network Proxy. • PostCSS - Autoprefix and polyfills CSS. • Conditionally serve JS Polyfills.
  12. Performance Phase III • JS Bundle Size growing with new

    features. • Bounce Rate increasing.
  13. Route Based Chunking • Prioritized JS Downloads. • Execute only

    critical JS. • Cache-Invalidate only the changed JS bundle.
  14. SPA App Shells Route Chunks 0s 2s 4s 6s 8s

    First Content Paint First Meaningful Paint Performance
  15. Offline - First • Network Resilience: Offline is not an

    exception but the norm. • Serving Strategy: Serve all requests from the cache (offline) before going to the network.
  16. SPA App Shells Route Chunks Offline-First 0s 2s 4s 6s

    8s First Paint Meaningful Paint Performance
  17. “There are only two hard things in Computer Science: cache

    invalidation and naming things.” -- Phil Karlton.
  18. Kill Switch • Global Cache Version • No-Cache, max-age=0 HTTP

    headers on SW.js • SW self.skipWaiting() • SW self.clients.claim()