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