Pwa Expert

---
license: Apache-2.0
name: pwa-expert
description: Progressive Web App development with Service Workers, offline support, and app-like behavior. Use for caching strategies, install prompts, push notifications, background sync. Activate on "PWA", "Service Worker", "offline", "install prompt", "beforeinstallprompt", "manifest.json", "workbox", "cache-first". NOT for native app development (use React Native), general web performance (use performance docs), or server-side rendering.
allowed-tools:
  - Read
  - Write
  - Edit
  - Bash
  - Grep
  - Glob
category: Frontend & UI
tags:
  - pwa
  - progressive-web-app
  - service-worker
  - offline
  - installable
---

# Progressive Web App Expert

Build installable, offline-capable web apps with Service Workers, smart caching, and native-like experiences.

## Decision Points

### Resource Caching Strategy Selection

```
REQUEST TYPE?
├─ Static assets (CSS, JS, fonts, images)
│  └─ CACHE-FIRST: Check cache → fallback to network
├─ API data that changes frequently
│  ├─ User expects fresh data?
│  │  └─ NETWORK-FIRST: Try network → fallback to cache
│  └─ Performance over freshness?
│     └─ STALE-WHILE-REVALIDATE: Serve cache → update in background
└─ Authentication/Real-time data
   └─ NETWORK-ONLY: Always fetch, no cache
```

### Connectivity Detection Logic

```
CONNECTIVITY STATUS?
├─ navigator.onLine === false
│  └─ Serve from cache OR show offline page
├─ Request fails (fetch throws)
│  ├─ Resource in cache?
│  │  └─ Serve cached version
│  └─ No cache available?
│     └─ Show offline fallback
└─ Online AND request succeeds
   └─ Update cache with fresh data
```

### Install Prompt Timing

```
beforeinstallprompt FIRED?
├─ User just arrived (< 30 seconds on site)?
│  └─ DEFER: Store prompt, don't show yet
├─ User engaged (scrolled, clicked, 2+ page views)?
│  ├─ Mobile device?
│  │  └─ SHOW: Mobile users expect app install
│  └─ Desktop?
│     └─ CONTEXTUAL: Show near task completion
└─ User dismissed before?
   └─ WAIT: Don't show again for 7+ days
```

## Failure Modes

### Stale Cache Syndrome
**Symptom:** Users see outdated content, complain "app isn't working"
**Detection:** User reports + cache timestamp > expected refresh interval
**Fix:** Force cache update with `caches.delete()` + trigger fresh fetch

### Service Worker Registration Failure
**Symptom:** PWA features not working, install prompt never appears
**Detection:** Console error "Failed to register service worker" OR `navigator.serviceWorker` undefined
**Fix:** Check HTTPS requirement (HTTP only works on localhost), validate SW file path, verify manifest linked in HTML

### Zombie Service Worker
**Symptom:** App updates not appearing, old SW keeps running
**Detection:** `registration.waiting` exists but `skipWaiting()` not called
**Fix:** Implement update flow with `postMessage()` to SW + `skipWaiting()` + `clients.claim()`

### Manifest Validation Failure
**Symptom:** "Add to Home Screen" never appears, PWA audit fails
**Detection:** DevTools Application tab shows manifest errors OR Lighthouse PWA score < 80
**Fix:** Validate required fields (name, start_url, display, icons 192x192 + 512x512), ensure HTTPS, check icon paths exist

### Cache Storage Explosion
**Symptom:** App slows down, storage quota exceeded errors
**Detection:** Cache storage > 50MB OR "QuotaExceededError" in console
**Fix:** Implement cache expiration (`maxEntries`, `maxAgeSeconds`), clean old cache versions in SW activate event

## Worked Examples

### Complete PWA Setup for Recovery Support App

**Scenario:** Convert existing Next.js recovery support app to installable PWA with offline meeting finder

**Step 1: Assess Current State**
- Check: HTTPS? ✓ (required for SW)  
- Check: manifest.json? ✗ (need to create)
- Check: Service Worker? ✗ (need to implement)

**Step 2: Decision - Caching Strategy**
```
Meeting data API → Changes daily → NETWORK-FIRST
User profile images → Rarely change → CACHE-FIRST  
Static assets → Never change per version → CACHE-FIRST
Meeting search → Mix strategy → STALE-WHILE-REVALIDATE
```

**Step 3: Create manifest.json**
```json
{
  "name": "Recovery Meetings Finder",
  "short_name": "Meetings",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#1a1410",
  "theme_color": "#1a1410",
  "icons": [
    {"src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png"},
    {"src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png"}
  ]
}
```

**Step 4: Implement Service Worker**
```javascript
// public/sw.js - Network-first for API
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/api/meetings')) {
    event.respondWith(networkFirst(event.request));
  }
});
```

**Expert catches:** Novice would miss offline fallback page, expert adds catch-all route to serve cached "/offline" for navigation requests that fail.

## Quality Gates

- [ ] Lighthouse PWA audit score ≥ 80/100
- [ ] Service Worker registers without console errors  
- [ ] Manifest.json validates (name, start_url, display, icons present)
- [ ] App works offline (test with DevTools Network → Offline)
- [ ] Install prompt appears on supported devices/browsers
- [ ] Cache strategy appropriate for each resource type
- [ ] Update flow notifies users when new version available
- [ ] Icons display correctly in system app drawer/desktop
- [ ] App launches in standalone mode when installed
- [ ] Background sync queues actions when offline (if implemented)

## Not-For Boundaries

**Do NOT use this skill for:**

- **Native mobile app development** → Use `react-native-expert` or `flutter-expert` instead
- **General web performance optimization** → Use `web-performance-expert` for non-PWA performance issues  
- **Server-side rendering problems** → Use `nextjs-expert` or framework-specific skills
- **Push notification infrastructure** → Use `push-notification-expert` for complex notification systems
- **Simple marketing sites** → PWA overhead not justified; use standard web development
- **Legacy browser support** → PWAs require modern browser features; use progressive enhancement approaches

**When to delegate:**
- Complex background sync with database conflicts → `data-sync-expert`
- Advanced caching with CDN integration → `cdn-expert` 
- Cross-platform native features → `capacitor-expert` or `electron-expert`