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
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
• Poor User Experience.
• Low Performance.
• Lack of Engagement tools.
Why we shut down our mobile website?
Slide 5
Slide 5 text
Mobile Web
No storage
requirements
Instant Loading
(No Install Friction) Always up-to-date
Slide 6
Slide 6 text
Challenges
With Mobile
• Low-end Device Profiles
• Slow Internet Speeds
• Flaky Network connectivity
Slide 7
Slide 7 text
• Browser Navigation Failures
• Network Congestion
• Low Signal
• Battery Saver Mode
• Thermal CPU Throttling
• Limited Carrier Capacity
• Server Outage
• ISP failure
Unpredictable Conditions
Slide 8
Slide 8 text
Learnings from Native App.
Slide 9
Slide 9 text
Architecture
Goals
• App Like Experience
• Build for Offline.
• Optimize for repeat visits
• 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
Slide 14
Slide 14 text
Service Worker
• Highly Programmable Low level primitive.
• Progressive Network Proxy in browser.
• Sophisticated Caching policies.
• Lives beyond the Browser Scope.
Slide 15
Slide 15 text
App Shells - Fastest Strategy
Slide 16
Slide 16 text
Offline Mode
Strategy
Slide 17
Slide 17 text
SW-Toolbox
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Single Page App - Drawbacks
• JS bundle is huge.
• CSS bundle is huge.
• Bad first load Performance.
Home Screen users
covert 70% more.
3x more Home Screen
additions.
40% more repeat visits.
Slide 26
Slide 26 text
Biz Requirements
• Cross browser support
• SEO
Phase II
Slide 27
Slide 27 text
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.
Slide 28
Slide 28 text
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.
Slide 29
Slide 29 text
PROGRESSIVE
WEB APP
Slide 30
Slide 30 text
Performance
Phase III • JS Bundle Size growing with
new features.
• Bounce Rate increasing.
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Route Based Chunking
(Code - Splitting)
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Route Based Chunking
• Prioritized JS Downloads.
• Execute only critical JS.
• Cache-Invalidate only the changed JS bundle.
Slide 37
Slide 37 text
SPA
App Shells
Route Chunks
0s 2s 4s 6s 8s
First Content Paint First Meaningful Paint
Performance
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Requirements
• Extreme Scalability
• Reduce # of network requests
• Fully fault tolerant Web App.
BBD
Slide 40
Slide 40 text
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.