# Pwa Workbox

> Workbox PWA

- Skill: `comeonoliver/pwa-workbox` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/pwa-workbox`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/pwa-workbox/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-workbox

---

# Workbox PWA

## Vite PWA Plugin
```bash
npm install vite-plugin-pwa
```

```typescript
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
    plugins: [VitePWA({
        registerType: 'autoUpdate',
        workbox: {
            globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
            runtimeCaching: [
                { urlPattern: /^https:\/\/api\./, handler: 'NetworkFirst',
                  options: { cacheName: 'api', expiration: { maxEntries: 50, maxAgeSeconds: 300 } } },
                { urlPattern: /\.(?:png|jpg|svg|webp)$/, handler: 'CacheFirst',
                  options: { cacheName: 'images', expiration: { maxEntries: 100 } } },
            ],
        },
    })],
});
```

## Workbox Strategies: CacheFirst, NetworkFirst, StaleWhileRevalidate, NetworkOnly, CacheOnly
## Background Sync for offline form submissions
## Precaching for app shell