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 → HTMLApp 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
- 17. SW-Toolbox
- 19. Single Page App - Drawbacks • JS bundle is huge. • CSS bundle is huge. • Bad first load Performance.
- 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.
- 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.
- 42. API Requests
- 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()
- 51. Offline-First Network Resilience Reliable Performance Robust Application
- 52. Reduced Bounce Rate. 2x BAU Conversion during BBD. Zero User Perceived Downtime.