PWA and Service Workers

In 2017 Twitter Lite replaced Twitter's native Android app in markets with slow connections. The PWA loaded in under 5 seconds on 3G, reduced data usage by 70%, and increased tweet engagement by 75%. The technology was not new - Service Workers shipped in Chrome in 2015 - but Twitter's deployment proved PWAs were production-viable at scale.

• Pinterest rebuilt their mobile web experience as a PWA in 2017. Time spent on the site increased by 40%, ad revenue from mobile increased 44%, and core engagement metrics matched the native app - while the PWA code was a fraction of the engineering effort.
• Uber's progressive web app (m.uber.com) loads the core booking flow in under 3 seconds on 2G networks and functions offline to show cached driver locations and trip history.
• Starbucks launched a PWA that works without internet connectivity. Customers can browse the menu, customize orders, and add items to a cart offline - the order syncs when connectivity returns.

Offline-First with Service Workers

A Service Worker is a JavaScript file that runs in a separate thread from the main page. It intercepts fetch() calls made by the page, can serve responses from cache, make network requests, or combine both. The key lifecycle: install (pre-cache critical assets), activate (clean old caches), fetch (intercept requests). Once installed, a Service Worker persists across page loads and survives the browser being closed.

Workbox (Google, 2017) is the production standard for Service Worker code. It generates SW code from a config, handles cache versioning and cleanup automatically, and provides pre-built strategies. Raw Service Worker code is fragile and error-prone to write by hand - Workbox is the Webpack of the SW world.

Caching Strategies

Different resource types need different caching strategies. A CSS file from a CDN can be served from cache forever if the URL is content-hashed. A news API response should be fresh. A user avatar can be stale for 24 hours. Service Workers encode this logic explicitly - no HTTP cache-control header can express the combination of "serve stale immediately, then update in background".

Cache-First is the right strategy only when the cache key changes when content changes (content-hashing). For Shopify's product images, they use Stale-While-Revalidate with a 24-hour max-age: the cached image shows instantly, and the Service Worker fetches a fresh version in the background for the next visit.

Push Notifications

Push notifications reach users even when the app tab is closed. The flow: the browser generates a unique subscription (endpoint URL + encryption keys), the app sends this to the server, the server uses a push service (Firebase Cloud Messaging, VAPID protocol) to deliver messages. The Service Worker receives the push event and shows a notification via the Notifications API.

VAPID (Voluntary Application Server Identification) lets a push server identify itself without requiring a FCM account. The server signs the push request with a private key; the push service verifies with the matching public key. Web-push npm package handles the VAPID signing on the Node.js server side.

Web App Manifest

The Web App Manifest is a JSON file that tells browsers how to treat the web app when launched from the home screen. It controls the app name, icons, start URL, display mode (standalone removes browser chrome), theme color (colors the Android status bar), and shortcuts. When a site serves a manifest and a Service Worker, Chrome and Edge show an "Install app" prompt.

The "maskable" icon purpose provides an icon with safe-zone padding. On Android, the launcher applies a shape mask (circle, square, squircle) to icons. A non-maskable icon gets a white border; a maskable icon fills the shape edge to edge. The maskable.app tool checks whether an icon passes the safe-zone test.

Key Ideas

• **Service Worker:** a JavaScript file that runs in a background thread, intercepts network requests, and controls caching - the engine behind offline functionality
• **Caching strategies:** Cache First (offline-first, fast), Network First (fresh data), Stale-While-Revalidate (fast first paint, background update) - each optimized for different resource types
• **Push notifications:** a Service Worker subscribes to a push service (VAPID keys), receives encrypted messages from the server even when the tab is closed
• **Web App Manifest:** a JSON file declaring the app name, icons, display mode, and theme color - enables Add to Home Screen and standalone launch without browser chrome

Related Topics

PWA capabilities sit on top of the web platform:

• DOM and Browser APIs — Service Workers extend the browser's fetch mechanism - the same fetch API used in the main thread
• Performance at Scale — Caching strategies and edge delivery are complementary - Service Workers cache at the device, CDNs cache at the network edge
• Testing: Jest, Playwright — Service Worker behavior (offline fallback, cache strategies) requires e2e tests - jsdom does not implement the Service Worker API

Вопросы для размышления

• Service Workers intercept all network requests including analytics, A/B test flags, and ad beacons. What happens to these when Cache First is applied broadly? Who should own the caching strategy decision?
• Push notifications have a permission prompt that users dismiss permanently. What UX patterns increase permission grant rates, and what makes push notifications feel like spam vs genuinely useful?
• A PWA installed on a user's home screen is updated by deploying a new Service Worker. What is the update lifecycle - and why do some PWA updates require the user to close all tabs before they take effect?

Связанные уроки

• net-21-http-basics