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