Offline-First Progressive Web Apps

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

Transcript

1. @AdityaPunjani Offline-First Progressive Web Apps
2. 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
4. • Poor User Experience. • Low Performance. • Lack of Engagement tools. Why we shut down our mobile website?
5. Mobile Web No storage requirements Instant Loading (No Install Friction) Always up-to-date
6. Challenges With Mobile • Low-end Device Profiles • Slow Internet Speeds • Flaky Network connectivity
7. • Browser Navigation Failures • Network Congestion • Low Signal • Battery Saver Mode • Thermal CPU Throttling • Limited Carrier Capacity • Server Outage • ISP failure Unpredictable Conditions
8. Learnings from Native App.
9. Architecture Goals • App Like Experience • Build for Offline. • Optimize for repeat visits
10. JavaScript (React.js) SPA + App Shells
11. App Shells
12. 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
13. • 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
14. Service Worker • Highly Programmable Low level primitive. • Progressive Network Proxy in browser. • Sophisticated Caching policies. • Lives beyond the Browser Scope.
15. App Shells - Fastest Strategy
16. Offline Mode Strategy
17. SW-Toolbox
19. Single Page App - Drawbacks • JS bundle is huge. • CSS bundle is huge. • Bad first load Performance.
20. Multiple SPAs Architecture
21. Each SPA : JS Bundle + CSS Bundle + HTML Shells
22. Benefits of Multiple SPAs • Smaller JS Bundles. • Smaller CSS Bundles. • Decoupled Deployments. • Navigations between SPAs allow SW update, Cache clean up, Heap Memory Clearing.
25. Home Screen users covert 70% more. 3x more Home Screen additions. 40% more repeat visits.
26. Biz Requirements • Cross browser support • SEO Phase II
27. 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.
28. 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.
29. PROGRESSIVE WEB APP
30. Performance Phase III • JS Bundle Size growing with new features. • Bounce Rate increasing.
32. Route Based Chunking (Code - Splitting)
36. Route Based Chunking • Prioritized JS Downloads. • Execute only critical JS. • Cache-Invalidate only the changed JS bundle.
37. SPA App Shells Route Chunks 0s 2s 4s 6s 8s First Content Paint First Meaningful Paint Performance
39. Requirements • Extreme Scalability • Reduce # of network requests • Fully fault tolerant Web App. BBD
40. 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.
41. PRE-BBD Architecture
42. API Requests
43. Offline-First API Requests
44. Offline-First Architecture
45. Repeat Visit
46. SPA App Shells Route Chunks Offline-First 0s 2s 4s 6s 8s First Paint Meaningful Paint Performance
47. “There are only two hard things in Computer Science: cache invalidation and naming things.” -- Phil Karlton.
48. Cache Invalidation • MaxAgeSeconds based TTL. • Cache Versions • Kill Switch
49. Kill Switch • Global Cache Version • No-Cache, max-age=0 HTTP headers on SW.js • SW self.skipWaiting() • SW self.clients.claim()
50. Emergency - Refresh
51. Offline-First Network Resilience Reliable Performance Robust Application
52. Reduced Bounce Rate. 2x BAU Conversion during BBD. Zero User Perceived Downtime.
54. Thank You! @AdityaPunjani