PWA Case Studies

// Twitter Lite caching strategy (simplified) const CACHE_NAME = 'twitter-lite-v1'; // Cache shell and static assets const SHELL_ASSETS = [ '/', '/app.js', '/app.css', '/offline.html' ]; // Network-first for API calls with fallback async function handleAPIRequest(request) { try { const response = await fetch(request); const cache = await caches.open(CACHE_NAME); cache.put(request, response.clone()); return response; } catch (error) { return await caches.match(request); } } // Lazy load images const imageObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; imageObserver.unobserve(img); } }); });

Performance Improvements: ✓ 65% increase in pages per session ✓ 75% increase in Tweets sent ✓ 20% decrease in bounce rate ✓ 70% faster load time ✓ Under 1MB for the initial download ✓ Works on 2G networks User Engagement: ✓ Users spend more time on the platform ✓ Higher conversion rate for logged-out users ✓ Better retention rates ✓ Significant reduction in data usage

// Offline menu browsing class MenuCache { async cacheMenuItems(items) { const cache = await caches.open('starbucks-menu'); const requests = items.map(item => { return cache.put( `/api/menu/${item.id}`, new Response(JSON.stringify(item)) ); }); await Promise.all(requests); } async getMenuItem(id) { const cached = await caches.match(`/api/menu/${id}`); if (cached) { return await cached.json(); } // Fetch from network if not cached const response = await fetch(`/api/menu/${id}`); return await response.json(); } } // Queue orders when offline class OrderQueue { constructor() { this.db = null; } async init() { return new Promise((resolve, reject) => { const request = indexedDB.open('OrderQueue', 1); request.onsuccess = () => { this.db = request.result; resolve(); }; request.onupgradeneeded = (event) => { const db = event.target.result; db.createObjectStore('pendingOrders', { keyPath: 'id', autoIncrement: true }); }; }); } async addPendingOrder(order) { return new Promise((resolve, reject) => { const transaction = this.db.transaction(['pendingOrders'], 'readwrite'); const store = transaction.objectStore('pendingOrders'); const request = store.add({ ...order, timestamp: Date.now(), synced: false }); request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error); }); } async processPendingOrders() { const orders = await this.getPendingOrders(); for (const order of orders) { try { await fetch('/api/orders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(order) }); await this.markOrderSynced(order.id); } catch (error) { console.error('Failed to sync order:', order.id); } } } }

Results: ✓ 2x daily active users compared to previous web experience ✓ 99.84% smaller than iOS app ✓ Orders can be placed even in areas with poor connectivity ✓ Reduced development costs (single codebase vs. native apps) Performance Metrics: ✓ Loads in under 3 seconds on 3G ✓ 23% faster than previous web experience ✓ Instant loading on repeat visits ✓ Smooth 60fps animations

// Pinterest image optimization class ImageOptimizer { constructor() { this.supportedFormats = this.detectSupportedFormats(); } detectSupportedFormats() { const formats = { webp: false, avif: false }; // Check WebP support const webpCanvas = document.createElement('canvas'); if (webpCanvas.getContext && webpCanvas.getContext('2d')) { formats.webp = webpCanvas.toDataURL('image/webp').indexOf('data:image/webp') === 0; } return formats; } getOptimalImageUrl(baseUrl, width, height) { const dpr = window.devicePixelRatio || 1; const actualWidth = Math.round(width * dpr); const actualHeight = Math.round(height * dpr); let format = 'jpg'; if (this.supportedFormats.avif) { format = 'avif'; } else if (this.supportedFormats.webp) { format = 'webp'; } return `${baseUrl}?w=${actualWidth}&h=${actualHeight}&format=${format}&quality=80`; } } // Infinite scroll with intersection observer class InfiniteScroll { constructor(container, loadMoreCallback) { this.container = container; this.loadMoreCallback = loadMoreCallback; this.isLoading = false; this.observer = new IntersectionObserver( this.handleIntersection.bind(this), { rootMargin: '200px' } ); this.setupSentinel(); } setupSentinel() { this.sentinel = document.createElement('div'); this.sentinel.className = 'scroll-sentinel'; this.container.appendChild(this.sentinel); this.observer.observe(this.sentinel); } async handleIntersection(entries) { const entry = entries[0]; if (entry.isIntersecting && !this.isLoading) { this.isLoading = true; try { await this.loadMoreCallback(); } finally { this.isLoading = false; } } } }

Performance Improvements: ✓ 40% reduction in time to interactive ✓ 44% increase in user-generated ad revenue ✓ 60% increase in core engagements ✓ Time spent increased by 40% Business Metrics: ✓ 3x faster page load ✓ 50% increase in ad click-through rate ✓ 50% increase in sign-ups ✓ Lower bounce rate

// Core ride booking experience - minimal payload const CORE_FEATURES = { requestRide: true, viewMap: true, trackDriver: true, payment: true }; // Progressive feature loading async function loadFeatureModule(featureName) { if (!CORE_FEATURES[featureName]) { return import(`./features/${featureName}.js`); } } // Minimal map implementation for low-bandwidth class LightweightMap { constructor(container) { this.container = container; this.useStaticMaps = this.shouldUseStaticMaps(); } shouldUseStaticMaps() { // Use static maps on slow connections const connection = navigator.connection; if (connection) { return connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g'; } return false; } async showLocation(lat, lng, zoom = 15) { if (this.useStaticMaps) { const staticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${lat},${lng}&zoom=${zoom}&size=400x300&markers=${lat},${lng}`; this.container.innerHTML = `<img src="${staticMapUrl}" alt="Map">`; } else { // Load interactive map const maps = await import('./interactive-maps.js'); maps.initialize(this.container, lat, lng, zoom); } } }

Technical Achievements: ✓ Core app loads in 3 seconds on 2G ✓ Works on devices with limited RAM ✓ 50KB initial download (compared to 25MB+ native app) ✓ Supports ES5 browsers Business Impact: ✓ Expanded to markets with poor connectivity ✓ Reached users with low-end devices ✓ Lower customer acquisition cost ✓ Increased ride requests in emerging markets

Conversion Improvements: ✓ 104% increase in conversion rate for new users ✓ 82% increase in iOS conversion rate ✓ 2x more pages visited per session ✓ 74% increase in time spent per session Performance Gains: ✓ 4x faster page load time ✓ Instant loading on repeat visits ✓ 30% better performance than native app on some metrics

Engagement Metrics: ✓ 70% greater conversion rate ✓ 3x more time spent on site ✓ 40% higher re-engagement rate ✓ 50% of new customers come from add to home screen Performance: ✓ 63% more visitors coming from home screen icon ✓ 10x less data usage compared to native app ✓ Initial load under 3 seconds on 3G

Performance Metrics: - Time to Interactive (TTI) - First Contentful Paint (FCP) - Largest Contentful Paint (LCP) - First Input Delay (FID) - Cumulative Layout Shift (CLS) - Total bundle size - Time to first byte (TTFB) Business Metrics: - Conversion rate - Bounce rate - Session duration - Pages per session - Add to home screen rate - Push notification opt-in rate - Return visitor rate - Revenue per user Engagement Metrics: - Daily/Monthly active users - User retention rate - Feature adoption rate - Offline usage percentage - Push notification engagement