Progressive Web Apps (PWA) Course

Lesson 1 • PWA Architecture and Components

Examines the technical building blocks: service workers, web app manifests, and HTTPS. Connects component roles to the overall PWA reliability and installability goals.

Lesson 2 • Setting Up the Development Environment

Guides students through configuring browsers, dev tools, and local servers for PWA development. Ensures a consistent baseline environment before writing any code.

Lesson 3 • PWA Audit Criteria and Checklists

Introduces Google's PWA checklist and Lighthouse scoring categories. Students learn to evaluate existing sites against baseline and exemplary PWA criteria.

Lesson 1 • Debugging and Updating Service Workers

Covers DevTools workflows for inspecting, updating, and unregistering service workers. Students gain confidence in iterating on service worker code during development.

Lesson 2 • Service Worker Registration and Scope

Covers how to register a service worker and define its scope within an origin. Establishes the foundation for all subsequent caching and background sync features.

Lesson 3 • Service Worker Lifecycle Events

Explains install, activate, and fetch lifecycle events and their execution order. Students learn to manage worker updates without disrupting active sessions.

Lesson 1 • Stale-While-Revalidate and Cache-Only

Covers stale-while-revalidate for balancing freshness and speed, and cache-only for fully offline assets. Completes the standard strategy toolkit introduced in the previous section.

Lesson 2 • The Cache API Fundamentals

Introduces Cache Storage, cache naming, and CRUD operations on cached responses. Provides the technical foundation for all caching strategy implementations.

Lesson 3 • Cache Management and Storage Limits

Addresses storage quotas, eviction policies, and strategies for keeping caches lean. Students learn to prevent storage bloat and handle quota exceeded errors.

Lesson 4 • Offline Fallback Pages and UX

Builds a custom offline fallback page and communicates connectivity status to users. Connects technical caching work to a polished, user-friendly offline experience.

Lesson 1 • Web App Manifest Structure

Covers all required and optional manifest fields including name, icons, and start URL. Establishes the manifest as the control file for installed app appearance and behavior.

Lesson 2 • Icons, Splash Screens, and Theming

Specifies icon sizes, purposes, and maskable variants for adaptive icons across platforms. Students configure theme and background colors for a branded installed experience.

Lesson 3 • Display Modes and Orientation

Explains standalone, fullscreen, minimal-ui, and browser display modes and their visual effects. Students select the appropriate mode for their app's navigation and UX requirements.

Lesson 1 • Server-Side Push Message Delivery

Explains the Web Push Protocol, VAPID authentication, and server-side message sending. Connects the client subscription from the previous section to a working server pipeline.

Lesson 2 • Push API and Notification Permissions

Covers the Push API subscription flow and best practices for requesting notification permission. Students learn to time permission requests to maximize user opt-in rates.

Lesson 3 • Handling Push Events in Service Workers

Implements the push event listener and Notification API to display rich notifications. Students customize notification actions, icons, and badge counts.

Lesson 1 • App Shell and Critical Resource Loading

Optimizes the app shell by inlining critical CSS and preloading key resources. Connects shell architecture from Chapter 1 to concrete loading performance gains.

Lesson 2 • Runtime Performance and Smooth Animations

Diagnoses jank using the Performance panel and applies CSS and JS animation best practices. Students achieve 60 fps interactions in their PWA UI.

Lesson 3 • Core Web Vitals and PWA Metrics

Introduces LCP, FID/INP, and CLS as the primary performance targets for PWAs. Students map each metric to user experience outcomes and set measurable improvement goals.

Lesson 4 • JavaScript Performance and Bundle Size

Applies tree shaking, code splitting, and deferred loading to reduce JavaScript overhead. Students use bundle analysis tools to identify and eliminate unused code.

Lesson 1 • Camera, Microphone, and Media Capture

Uses the MediaDevices API to capture photos, video, and audio within a PWA. Students build a media capture feature with preview and upload functionality.

Lesson 2 • File System Access and Clipboard APIs

Enables reading and writing local files using the File System Access API and clipboard integration. Students build document-editing features that feel native on the desktop.

Lesson 3 • Web Share, Shortcuts, and Badging

Integrates the Web Share API, app shortcuts, and the Badging API for OS-level engagement. Students add share targets, quick-action shortcuts, and unread count badges to their PWA.

Lesson 1 • Production Build and Deployment Pipeline

Configures build tooling to generate optimized service worker and manifest files for production. Students automate deployment to a static hosting provider with HTTPS.

Lesson 2 • Monitoring, Analytics, and Error Tracking

Instruments a PWA with real-user monitoring, offline event tracking, and error reporting. Students gain visibility into production performance and failure patterns.

Lesson 3 • Automated PWA Auditing in CI/CD

Integrates Lighthouse CI into a continuous integration pipeline to enforce PWA quality gates. Students configure score thresholds that block deployments on regression.

Lesson 4 • Cross-Browser and Cross-Platform Testing

Tests PWA features across Chrome, Firefox, Safari, and Edge on desktop and mobile. Students identify and resolve platform-specific gaps in service worker and manifest support.