Progressive Web Apps on Software Engineering Learning Paths

PWA Fundamentals

Mon, 01 Jan 0001 00:00:00 +0000

What Makes a Progressive Web App#

A Progressive Web App is a web application that uses modern browser APIs and a strategic design approach to deliver a native-app-like experience. The term was coined by Alex Russell and Frances Berriman in 2015, but the underlying principles are rooted in the web’s core strengths: linkability, discoverability, and universal access.

A PWA is not a framework or a specific technology. It is a set of characteristics:

Service Workers

Mon, 01 Jan 0001 00:00:00 +0000

What Is a Service Worker#

A service worker is a JavaScript file that the browser runs in the background, separate from the web page. It acts as a programmable network proxy — intercepting every network request the page makes and deciding how to respond. This is the foundational technology that enables offline support, background sync, and push notifications.

Key properties:

Property	Detail
Thread	Runs on its own thread — no access to the DOM
Scope	Controls all pages under its registered scope
HTTPS only	Requires a secure origin (localhost exempt for dev)
Event-driven	Wakes up in response to events, then terminates when idle
No persistent state	Cannot rely on global variables between events — use IndexedDB or the Cache API
Async only	Synchronous APIs (e.g. `localStorage`, `XHR`) are not available

Registration#

Caching Strategies

Mon, 01 Jan 0001 00:00:00 +0000

The Cache API#

The Cache API provides a storage mechanism for request/response pairs, designed specifically for service workers. Unlike the browser’s HTTP cache, you have full programmatic control over what goes in and what comes out.

// Open (or create) a named cache
const cache = await caches.open('my-cache-v1');

// Store a response
await cache.put(request, response);

// Store by fetching the URL
await cache.add('/styles/main.css');

// Store multiple URLs at once
await cache.addAll(['/index.html', '/app.js', '/styles.css']);

// Retrieve a cached response
const response = await caches.match(request);

// Delete an entry
await cache.delete(request);

// List all keys
const keys = await cache.keys();

Important: cache.add() and cache.addAll() will reject if any response is not a successful (2xx) HTTP response. A single 404 in the list fails the entire batch.

Offline-First Architecture

Mon, 01 Jan 0001 00:00:00 +0000

The Offline-First Mindset#

Offline-first design treats the network as an enhancement rather than a requirement. Instead of building for connectivity and then patching in offline support, you design the application to work without a network from the start. The network, when available, synchronises local state with the server.

This approach matters because network reliability is a spectrum, not a binary. Users encounter:

Scenario	Reality
Underground trains, lifts, aeroplanes	Zero connectivity
Conference centres, stadiums	Congested, unreliable
Rural areas, emerging markets	Slow, intermittent
Office Wi-Fi switching to mobile data	Brief disconnection during handoff

An offline-first PWA handles all of these gracefully.

Push Notifications

Mon, 01 Jan 0001 00:00:00 +0000

The Push Architecture#

Push notifications on the web involve three actors and two separate APIs:

┌──────────────┐ ┌──────────────────┐ ┌──────────────┐
│ Your Server │ ──► │ Push Service │ ──► │ Browser + │
│ (backend) │ │ (vendor-operated)│ │ Service Worker│
└──────────────┘ └──────────────────┘ └──────────────┘
 │ │ │
 Web Push Protocol Vendor endpoint push event
 (RFC 8030) (FCM, Mozilla, etc.) in SW

Component	Role
Notification API	Displays notifications to the user (can be used without push)
Push API	Allows the server to send messages to the browser, even when the page is closed
Push Service	Vendor-operated server (FCM for Chrome, autopush for Firefox) that queues and delivers messages
VAPID	Voluntary Application Server Identification — authenticates your server to the push service

The Notification API#

The Notification API works independently of push — you can show notifications from page JavaScript without involving a server:

Advanced Web APIs

Mon, 01 Jan 0001 00:00:00 +0000

Project Fugu and the Capabilities Gap#

Project Fugu is a cross-company effort (Google, Microsoft, Intel, Samsung) to bring native-level capabilities to the web platform while preserving security and user privacy. Named after the Japanese puffer fish — delicious if prepared correctly, lethal if not — the project acknowledges that exposing powerful APIs must be done carefully.

The Fugu tracker at fugu-tracker.web.app catalogues the status of dozens of APIs. This section covers the most impactful ones for PWA development.

Performance & Loading

Mon, 01 Jan 0001 00:00:00 +0000

Why Performance Matters for PWAs#

A PWA that loads slowly on first visit will never become an installed app. Performance is not a separate concern — it is a prerequisite for every other PWA capability. Users on mobile networks with 3G-equivalent speeds will abandon a page that takes more than 3 seconds to become interactive. Google uses Core Web Vitals as a ranking signal, directly linking performance to discoverability.

Core Web Vitals#

Google’s Core Web Vitals are three metrics that measure real-user experience:

Testing & Deployment

Mon, 01 Jan 0001 00:00:00 +0000

Testing Service Workers#

Service worker testing is inherently different from unit testing regular JavaScript. A service worker runs in a separate thread, intercepts real network requests, and persists across page loads. You need a combination of unit tests (for strategy logic), integration tests (for service worker behaviour), and manual DevTools verification.

Unit Testing Caching Logic#

Extract caching strategies into pure functions that can be tested outside the service worker:

// cache-strategies.js — testable without a service worker
export function shouldCacheResponse(response) {
 if (!response || !response.ok) return false;
 if (response.status === 206) return false; // Partial content
 if (response.headers.get('Cache-Control')?.includes('no-store')) return false;
 return true;
}

export function getCacheNameForRequest(url) {
 const path = new URL(url).pathname;
 if (path.startsWith('/api/')) return 'api-cache';
 if (path.match(/\.(png|jpg|webp|svg)$/)) return 'image-cache';
 return 'static-cache';
}

// cache-strategies.test.js
import { describe, it, expect } from 'vitest';
import { shouldCacheResponse, getCacheNameForRequest } from './cache-strategies.js';

describe('shouldCacheResponse', () => {
 it('returns true for a 200 response', () => {
 const response = new Response('ok', { status: 200 });
 expect(shouldCacheResponse(response)).toBe(true);
 });

 it('returns false for a 404 response', () => {
 const response = new Response('not found', { status: 404 });
 expect(shouldCacheResponse(response)).toBe(false);
 });

 it('returns false for null response', () => {
 expect(shouldCacheResponse(null)).toBe(false);
 });
});

describe('getCacheNameForRequest', () => {
 it('routes API calls to api-cache', () => {
 expect(getCacheNameForRequest('https://example.com/api/users')).toBe('api-cache');
 });

 it('routes images to image-cache', () => {
 expect(getCacheNameForRequest('https://example.com/photo.webp')).toBe('image-cache');
 });

 it('routes other requests to static-cache', () => {
 expect(getCacheNameForRequest('https://example.com/app.js')).toBe('static-cache');
 });
});

Integration Testing with Playwright#

Playwright can control service worker registration and intercept network requests: