Agent skill
pwa-development
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.
Install this agent skill to your Project
npx add-skill https://github.com/jwynia/agent-skills/tree/main/skills/tech/frontend/pwa/pwa-development
Metadata
Additional technical details for this skill
- mode
- assistive
- type
- utility
- author
- jwynia
- domain
- development
- version
- 1.0
SKILL.md
PWA Development
Implement Progressive Web App features including service workers, caching strategies, offline support, and installation prompts for React and Svelte applications.
When to Use This Skill
Use this skill when:
- Adding PWA capabilities to a web app
- Implementing offline support
- Creating service worker caching strategies
- Debugging PWA installation issues
- Handling iOS-specific PWA quirks
Do NOT use this skill when:
- Building backend APIs
- Working on requirements/design (use those skills first)
- Need complex offline-first architecture (design first)
Core Principle
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.
Diagnostic States
P0: No PWA Setup
Symptoms: No manifest.json, no service worker, online-only
Interventions:
- Run
scripts/manifest-generator.tsto create manifest - Add
<link rel="manifest">to HTML head - Generate minimal SW with
scripts/sw-scaffolder.ts
P1: Basic Manifest Only
Symptoms: Manifest exists but SW missing, breaks offline
Key Questions:
- What content MUST be available offline?
- What should always be fresh (network-first)?
Interventions:
- Use
scripts/cache-strategy-advisor.ts - Implement app shell pattern
- Add offline fallback page
P2: Caching Issues
Symptoms: Stale content, unexpected caching behavior
Interventions:
- Audit with
scripts/pwa-audit.ts - Map resources to strategies using
data/caching-strategies.json - Add cache expiration and cleanup
P3: Update Problems
Symptoms: Users stuck on old versions, multiple refreshes needed
Interventions:
- Implement skipWaiting/clients.claim appropriately
- Add update notification UI (
assets/update-prompt.tsx) - Handle "waiting" state properly
P4: Offline Data Gaps
Symptoms: User actions lost offline, no sync indicator
Interventions:
- Implement IndexedDB for offline storage
- Add Background Sync API
- Create sync status UI
P5: iOS Issues
Symptoms: Works on Android, breaks on iOS
Interventions:
- Review
data/ios-quirks.json - Add apple-mobile-web-app meta tags
- Handle storage eviction gracefully
P6: Production Ready
Indicators: Lighthouse PWA 100, works offline, updates cleanly
Caching Strategies
| 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 |
Available Scripts
| 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 |
Anti-Patterns
The Everything Cache
Precaching every asset - massive initial download. Fix: Precache only critical app shell. Runtime cache content.
The Immortal Cache
Never expiring caches - stale content forever. Fix: Cache versioning, delete old on activate, set max age.
The Silent Update
Forcing updates without notification. Fix: Notify user, let them choose when to refresh.
The iOS Afterthought
Building for Chrome, testing iOS last. Fix: Test iOS early. Accept iOS limitations.
Framework Quick Reference
React + Vite
npm i -D vite-plugin-pwa
SvelteKit
npm i -D @vite-pwa/sveltekit
Next.js
npm i next-pwa
See data/framework-patterns.json for configuration.
Debugging Checklist
- DevTools > Application > Manifest - Valid?
- DevTools > Application > Service Workers - Registered?
- DevTools > Application > Cache Storage - What's cached?
- DevTools > Network > Offline - Works offline?
- Lighthouse > PWA - Score and failures?
- iOS Safari - Test on actual device
Related Skills
- requirements-analysis - Determine offline requirements
- system-design - PWA architecture decisions
- react-pwa - React-specific PWA implementation
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
jwynia/agent-skills
document-to-narration
Convert written documents to narrated video scripts with TTS audio and word-level timing. Use when preparing essays, blog posts, or articles for video narration. Outputs scene files, audio, and VTT with precise word timestamps. Keywords: narration, voiceover, TTS, scenes, audio, timing, video script, spoken.
jwynia/agent-skills
shadcn-layouts
Generate correct shadcn/Tailwind layouts by applying CSS mental models. This skill should be used when the user asks to 'create a shadcn layout', 'fix layout issues', 'debug CSS height problems', 'make scrolling work', or has issues with Tailwind flex/grid. Keywords: shadcn, Tailwind, layout, CSS, flex, grid, height, scroll, overflow.
jwynia/agent-skills
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.
jwynia/agent-skills
react-pwa
jwynia/agent-skills
mastra-hono
Develop AI agents, tools, and workflows with Mastra v1 Beta and Hono servers. This skill should be used when creating Mastra agents, defining tools with Zod schemas, building workflows with step data flow, setting up Hono API servers with Mastra adapters, or implementing agent networks. Keywords: mastra, hono, agent, tool, workflow, AI, LLM, typescript, API, MCP.
jwynia/agent-skills
abstract-strategy
Design abstract strategy games with perfect information, no randomness, and strategic depth. Use when designing a board game, exploring abstract strategy games, brainstorming game mechanics, or evaluating game balance. Keywords: board game, game design, strategy, mechanics, balance.
Didn't find tool you were looking for?