Implement Progressive Web App features for React and Svelte projects. This skill should be used when the user asks to 'make a PWA', 'add offline support', 'create a service worker', 'fix caching issues', or wants installable web apps. Keywords: PWA, service worker, offline, manifest, caching, installable, Workbox, vite-pwa.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin jwynia-agent-skills-1This skill uses the workspace's default tool permissions.
Implement Progressive Web App features including service workers, caching strategies, offline support, and installation prompts for React and Svelte applications.
assets/manifest.json.templateassets/offline-page.htmlassets/service-worker-workbox.tsassets/update-prompt.svelteassets/update-prompt.tsxdata/caching-strategies.jsondata/framework-patterns.jsondata/ios-quirks.jsondata/manifest-options.jsonscripts/cache-strategy-advisor.tsscripts/manifest-generator.tsscripts/pwa-audit.tsscripts/sw-scaffolder.tsGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Implement Progressive Web App features including service workers, caching strategies, offline support, and installation prompts for React and Svelte applications.
Use this skill when:
Do NOT use this skill when:
PWAs fail when offline behavior is an afterthought. A PWA is not "add service worker to existing app." It's a fundamental architectural decision about data flow, caching, and connectivity failure.
Symptoms: No manifest.json, no service worker, online-only
Interventions:
scripts/manifest-generator.ts to create manifest<link rel="manifest"> to HTML headscripts/sw-scaffolder.tsSymptoms: Manifest exists but SW missing, breaks offline
Key Questions:
Interventions:
scripts/cache-strategy-advisor.tsSymptoms: Stale content, unexpected caching behavior
Interventions:
scripts/pwa-audit.tsdata/caching-strategies.jsonSymptoms: Users stuck on old versions, multiple refreshes needed
Interventions:
assets/update-prompt.tsx)Symptoms: User actions lost offline, no sync indicator
Interventions:
Symptoms: Works on Android, breaks on iOS
Interventions:
data/ios-quirks.jsonIndicators: Lighthouse PWA 100, works offline, updates cleanly
| Strategy | Use For | Behavior |
|---|---|---|
| Cache First | Static assets, fonts | Serve from cache, update in background |
| Network First | API data, user content | Try network, fall back to cache |
| Stale While Revalidate | Semi-static content | Serve stale, update cache for next time |
| Network Only | Auth, real-time data | Always network, no caching |
| Script | Purpose |
|---|---|
manifest-generator.ts | Generate manifest.json |
sw-scaffolder.ts | Generate service worker |
cache-strategy-advisor.ts | Recommend caching strategies |
pwa-audit.ts | Validate PWA configuration |
Precaching every asset - massive initial download. Fix: Precache only critical app shell. Runtime cache content.
Never expiring caches - stale content forever. Fix: Cache versioning, delete old on activate, set max age.
Forcing updates without notification. Fix: Notify user, let them choose when to refresh.
Building for Chrome, testing iOS last. Fix: Test iOS early. Accept iOS limitations.
npm i -D vite-plugin-pwa
npm i -D @vite-pwa/sveltekit
npm i next-pwa
See data/framework-patterns.json for configuration.