pwa

name	pwa
description	Progressive Web Apps with service workers, web app manifest, offline-first architecture, and push notifications
layer	domain
category	mobile
triggers	["PWA","progressive web app","service worker","offline first","web app manifest","install prompt","workbox","cache strategy"]
inputs	[{"requirements":"Offline capabilities, push notifications, installability"},{"framework":"Next.js | React | SvelteKit | Vanilla (optional)"},{"caching_strategy":"Cache-first | Network-first | Stale-while-revalidate"},{"features":"Background sync, push notifications, share target, file handling"}]
outputs	[{"manifest":"Web app manifest configuration"},{"service_worker":"Service worker with caching strategies"},{"install_prompt":"Install experience implementation"},{"offline_strategy":"Offline data handling and sync"}]
linksTo	["react","nextjs","caching","performance-profiler"]
linkedFrom	["cook","plan","nextjs"]
preferredNextSkills	["nextjs","caching"]
fallbackSkills	["react"]
riskLevel	low
memoryReadPolicy	selective
memoryWritePolicy	none
sideEffects	[]

Progressive Web Apps (PWA) Skill

Purpose

Build Progressive Web Apps that work offline, are installable on home screens, and provide native-like experiences using web technologies. This skill covers the Web App Manifest, Service Worker lifecycle, caching strategies (Workbox), background sync, push notifications, and the install experience. PWAs bridge the gap between web and native without app store requirements.

Key Concepts

PWA Requirements

REQUIRED (for installability):
  - HTTPS (or localhost for development)
  - Web App Manifest with required fields
  - Service Worker with fetch handler
  - At least one icon (192x192 and 512x512)

ENHANCED CAPABILITIES:
  - Offline support via caching strategies
  - Push notifications
  - Background sync
  - Share target (receive shared content)
  - File handling
  - Shortcuts (quick actions from icon)
  - Badging API (notification badge on icon)

Caching Strategies

CACHE FIRST (Cache Falling Back to Network):
  Best for: Static assets, fonts, images, CSS, JS bundles
  Behavior: Check cache first. If miss, fetch from network and cache.
  Tradeoff: Fast but may serve stale content.

NETWORK FIRST (Network Falling Back to Cache):
  Best for: API responses, dynamic content, user-specific data
  Behavior: Try network first. If offline/slow, fall back to cache.
  Tradeoff: Always fresh when online, cached when offline.

STALE-WHILE-REVALIDATE:
  Best for: Semi-dynamic content (avatars, product lists, articles)
  Behavior: Return cached immediately, fetch update in background.
  Tradeoff: Instant but may show stale data briefly.

NETWORK ONLY:
  Best for: Analytics pings, real-time data, payment processing
  Behavior: Always fetch from network. No caching.

CACHE ONLY:
  Best for: Pre-cached app shell, offline fallback page
  Behavior: Only serve from cache. Never network.

Patterns

Web App Manifest

{
  "name": "My Application",
  "short_name": "MyApp",
  "description": "A progressive web application",
  "start_url": "/",
  "display":