Progressive Web Apps (PWAs) Cheat Sheet

Updated 2026-05-25

🧠Study flashcards on this topic122 cards · spaced repetition→

Progressive Web Apps combine web and native app capabilities, delivering app-like experiences through browser technologies. Built on service workers, web app manifests, and HTTPS, PWAs work offline, install to home screens, and send push notifications — all without app store gatekeeping. The critical insight: PWAs don't replace websites or native apps; they bridge the gap by giving web content the reach of URLs and the engagement of apps. As of 2026, all major browsers — Chrome, Edge, Firefox (v143+ on Windows), and Safari — support web apps to varying degrees, with service workers now controlling roughly one fifth of all web properties.

What This Cheat Sheet Covers

This topic spans 21 focused tables and 138 indexed concepts, 122 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core RequirementsTable 2: Web App Manifest PropertiesTable 3: Service Worker LifecycleTable 4: Caching StrategiesTable 5: Cache API OperationsTable 6: Offline Data StorageTable 7: Installation & PromotionTable 8: Push NotificationsTable 9: Background OperationsTable 10: App Shell ArchitectureTable 11: Advanced Manifest FeaturesTable 12: Display Modes & UI CustomizationTable 13: Platform-Specific FeaturesTable 14: Performance OptimizationTable 15: Testing & DebuggingTable 16: Security ConsiderationsTable 17: Browser Compatibility (2026)Table 18: Workbox Library (Google)Table 19: Common Pitfalls & SolutionsTable 20: iOS-Specific ConsiderationsTable 21: PWA App Store Distribution

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

Table 1: Core Requirements

Installability requires meeting a minimum set of criteria; browsers check these automatically and surface an install prompt when met. Understanding exactly which requirements apply to which browser prevents wasted debugging effort.

Requirement	Example	Description
HTTPS (secure context)	`https://example.com`	• Mandatory for service workers and most PWA APIs • localhost/127.0.0.1 exempt for development • prevents man-in-the-middle attacks on cached assets.
Web App Manifest	`<link rel="manifest"` `href="/manifest.json">`	• JSON file defining app name, icons, display mode • linked from HTML • enables installation prompt and appearance customization.
Service Worker	`navigator.serviceWorker` `.register('/sw.js')`	• JavaScript proxy between web app and network • enables offline functionality, push notifications, and background sync • runs independently of page.
Valid Manifest Icons	`"icons": [{"src": "icon-192.png",` `"sizes": "192x192"}]`	• Minimum 192×192 and 512×512 PNG icons required • displayed on home screen, task switcher, and splash screen.
Installability Criteria	HTTPS + valid manifest + name + icons	• Chrome and Edge now require only HTTPS + manifest with name and icons — service worker no longer required for the install prompt in Chromium browsers • triggers beforeinstallprompt when met.

Table 2: Web App Manifest Properties

The manifest is the identity card of your PWA — it controls what users see at install time, how the app looks when launched, and which advanced capabilities are enabled. Getting core fields right is prerequisite for installability; newer fields like id, screenshots, and launch_handler unlock richer install UIs and precise lifecycle control.

Property	Example	Description
name	`"name": "My PWA Application"`	• Full application name displayed during installation and in OS-specific contexts • required for installability.

The rest of this section is part of the full cheat sheet

Table 3: Service Worker Lifecycle

The service worker lifecycle is the most subtle part of PWA development: workers enter waiting state, can block each other, and updates require careful coordination. Mastering install, activate, skipWaiting(), and clients.claim() prevents users from getting stuck on stale versions.

Phase	Example	Description
Registration	`navigator.serviceWorker` `.register('/sw.js')` `.then(reg => console.log(reg))`	• Main thread registers service worker file • browser downloads, parses, and installs SW • returns registration promise.

The rest of this section is part of the full cheat sheet

Table 4: Caching Strategies

Choosing the right caching strategy per resource type is the single biggest lever for offline reliability and perceived performance. Static assets need cache-first; API responses need network-first or stale-while-revalidate; sensitive data needs network-only.

Strategy	Example	Description
Cache-First (Cache Falling Back to Network)	`caches.match(req)` `.then(r => r \|\| fetch(req))`	• Checks cache first, fetches if missing • fastest loading for static assets • risk of stale content without revalidation.

The rest of this section is part of the full cheat sheet

Table 1: Core Requirements

Requirement	Example	Description
HTTPS (secure context)	`https://example.com`	• Mandatory for service workers and most PWA APIs • localhost/127.0.0.1 exempt for development • prevents man-in-the-middle attacks on cached assets.
Web App Manifest	`<link rel="manifest"` `href="/manifest.json">`	• JSON file defining app name, icons, display mode • linked from HTML • enables installation prompt and appearance customization.
Service Worker	`navigator.serviceWorker` `.register('/sw.js')`	• JavaScript proxy between web app and network • enables offline functionality, push notifications, and background sync • runs independently of page.
Valid Manifest Icons	`"icons": [{"src": "icon-192.png",` `"sizes": "192x192"}]`	• Minimum 192×192 and 512×512 PNG icons required • displayed on home screen, task switcher, and splash screen.
Installability Criteria	HTTPS + valid manifest + name + icons	• Chrome and Edge now require only HTTPS + manifest with name and icons — service worker no longer required for the install prompt in Chromium browsers • triggers beforeinstallprompt when met.

Table 2: Web App Manifest Properties

Property	Example	Description
name	`"name": "My PWA Application"`	• Full application name displayed during installation and in OS-specific contexts • required for installability.

Table 3: Service Worker Lifecycle

Phase	Example	Description
Registration	`navigator.serviceWorker` `.register('/sw.js')` `.then(reg => console.log(reg))`	• Main thread registers service worker file • browser downloads, parses, and installs SW • returns registration promise.

Table 4: Caching Strategies

Strategy	Example	Description
Cache-First (Cache Falling Back to Network)	`caches.match(req)` `.then(r => r \|\| fetch(req))`	• Checks cache first, fetches if missing • fastest loading for static assets • risk of stale content without revalidation.