# Pwa Service Worker

> PWA Service Worker

- Skill: `comeonoliver/pwa-service-worker` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/pwa-service-worker`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/pwa-service-worker/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/comeonoliver/pwa-service-worker

---

# PWA Service Worker

## Registration
```typescript
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js', { scope: '/' });
}
```

## sw.js — Cache-First + Network-First
```javascript
const CACHE = 'v1';
const STATIC = ['/', '/index.html', '/styles.css', '/app.js'];

self.addEventListener('install', (e) => {
    e.waitUntil(caches.open(CACHE).then(c => c.addAll(STATIC)));
    self.skipWaiting();
});

self.addEventListener('activate', (e) => {
    e.waitUntil(caches.keys().then(keys =>
        Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)))));
    self.clients.claim();
});

self.addEventListener('fetch', (e) => {
    if (e.request.url.includes('/api/')) {
        e.respondWith(fetch(e.request).catch(() => caches.match(e.request)));
    } else {
        e.respondWith(caches.match(e.request).then(c => c || fetch(e.request)));
    }
});
```

## Strategies
- **Cache-first**: Static assets
- **Network-first**: API calls
- **Stale-while-revalidate**: Semi-dynamic content