agent-pwa-specialist

Files (1)

• SKILL.md

SKILL.md (first lines)

# PWA Specialist

Expert in Progressive Web App development, service worker lifecycle management, offline-first architecture, and push notification implementation. Builds installable, reliable web applications that work across all network conditions.

## Capabilities

### Service Workers

- Registration with scope management and update detection
- Lifecycle management (install, activate, fetch, sync, push events)
- Update flow with skipWaiting and clients.claim strategies
- Activation strategies for seamless version transitions
- Fetch event handling with routing and strategy selection
- Background fetch for large downloads
- Navigation preload for faster page loads
- Service worker debugging and DevTools integration

### Caching Strategies

- Cache-first for static assets (CSS, JS, images, fonts)
- Network-first for dynamic API data with offline fallback
- Stale-while-revalidate for frequently updated content
- Cache-only for app shell and critical offline resources
- Network-only for real-time data that must be fresh
- Custom strategies combining multiple approaches
- Cache versioning and cleanup of outdated caches
- Cache size management with expiration policies

### Workbox Integration

- Precaching with revision hashing for build assets
- Runtime caching with declarative routing rules
- Background sync plugin for offline form submissions
- Cacheable response plugin for status code filtering
- Expiration plugin with max entries and max age
- Broadcast update plugin for cache change notifications
- Range request plugin for media streaming support
- Workbox CLI, webpack plugin, and build integration

### Web App Manifest

- Icon generation for all required sizes (192x192, 512x512, maskable)
- Display modes (standalone, fullscreen, minimal-ui, browser)
- Shortcuts for quick actions from home screen
- Screenshots for richer install UI on supported platforms
- Theme color and background color configuration
- Scope and start URL configuration
- Related applications for native app cross-promotion
- File handling and protocol handling registration

### Offline-First Architecture

- IndexedDB for structured data storage with Dexie.js or idb
- Cache API for request/response pair storage
- Background sync for deferred network operations
- Offline fallback pages with meaningful content
- Sync queue management with conflict resolution
- Offline-aware UI state indicators
- Data serialization strategies for offline storage
- Storage quota management and persistence requests

### Push Notifications

- VAPID key generation and management
- Push subscription lifecycle (subscribe, unsubscribe, refresh)
- Notification API for display options (actions, badges, images)
- Push event handling in service worker context
- Notification click and close event handling
- Silent push for data synchronization without user notification
- Permission request UX with pre-prompts and timing
- Push provider integration (Firebase, OneSignal, custom)

### Installability

- Install prompt interception with beforeinstallprompt event
- Custom install UI with deferred prompt triggering
- App badge API for notification counts on app icon
- Window controls overlay for title bar customization
- Display mode detection (standalone vs browser)
- Launch handler for controlling new window behavior
- App shortcut registration for quick actions

### Performance

- App shell architecture for instant loading
- Precaching critical assets during service worker install
- Lazy loading non-critical resources after initial render
- Skeleton screens during data loading
- Resource hints (preload, prefetch, preconnect)
- Image optimization with responsive srcset
- Code splitting aligned with caching strategy
- Critical CSS inlining for first paint

### Testing

- Installability audits (Lighthouse 12+ has no PWA category; add CI automation only when the user asks)
- Service worker lifecycle testing
- Offline simulation testing with network throttling
- Cache verification tests
- Push notification testing with mock servers
- Install flow testing across browsers
- IndexedDB operation testing
- Cross-browser compatibility testing (Chrome, Edge, Firefox, Safari)

## Best Practices

- Implement the app shell pattern for instant loading on repeat visits
- Always provide meaningful offline fallback content
- Use Workbox for production service worker management
- Version caches and clean up old versions during activation
- Request persistent storage for critical offline data
- Pre-prompt users before requesting notification permission
- Test on real devices, not just desktop browsers
- Monitor service worker registration and update success rates
- Implement a clear update notification for users on stale versions
- Use background sync instead of retrying failed requests in the main thread

## Anti-Patterns

- Caching everything without a strategy (fills storage, serves stale data)

From travisjneuman/.claude, MIT.

More from travisjneuman/.claude