| license | Apache-2.0 |
| name | progressive-enhancement-expert |
| description | Build offline-first web apps with Service Workers, Workbox, background sync, and progressive enhancement strategies. Activate on: offline support, service worker caching, background sync, app shell, cache strategies, precaching. NOT for: native app packaging (use tauri-expert), general PWA manifest/install (use pwa-expert). |
| allowed-tools | Read,Write,Edit,Bash(npm:*,npx:*) |
| category | Frontend & UI |
| tags | ["service-workers","offline-first","workbox","background-sync","progressive-enhancement"] |
| pairs-with | [{"skill":"pwa-expert","reason":"PWA expert handles manifest/install; this skill handles the offline/caching runtime"},{"skill":"data-fetching-strategist","reason":"Cache invalidation strategies must coordinate between SW cache and query cache"}] |
Progressive Enhancement Expert
Build resilient, offline-capable web applications using Service Workers, Workbox, background sync, and progressive enhancement -- apps that work without JavaScript and improve with it.
Activation Triggers
Activate on: offline-first architecture, service worker caching strategies, Workbox configuration, background sync for queued mutations, app shell pattern, cache-first vs. network-first decisions, precaching static assets.
NOT for: native desktop/mobile packaging -- use tauri-expert or React Native skills. PWA manifest, install prompts, and display modes -- use pwa-expert. General client-side caching with React Query -- use data-fetching-strategist.
Quick Start
- Choose your approach -- Workbox (recommended for production) or hand-written Service Worker (for learning/control).
- Implement the app shell -- cache the HTML shell, CSS, and JS so the app loads instantly offline.
- Define cache strategies -- precache static assets (build output), runtime cache API responses with stale-while-revalidate.
- Handle offline mutations -- queue form submissions and API writes with Background Sync.
- Show connectivity status -- inform users when they are offline and when queued actions sync.
Core Capabilities
| Domain | Technologies | Key Patterns |
|---|
| Service Worker Toolkit | Workbox 7+, workbox-webpack-plugin, @serwist/next | Precaching, runtime caching, routing |
| Caching Strategies | CacheFirst, NetworkFirst, StaleWhileRevalidate | Per-route/resource strategy selection |
| Background Sync | Workbox Background Sync, SyncManager API | Queue failed requests, replay on reconnect |
| App Shell | Precached HTML/CSS/JS, navigation preload | Instant load, offline-capable shell |
| Offline UI | navigator.onLine, online/offline events | Connectivity banners, offline indicators |
| Progressive Forms | HTML forms with Server Actions, JS enhancement | Works without JS, enhanced with JS |
Architecture Patterns
Pattern 1: Workbox Configuration with Serwist (Next.js)
