# pwa-expert

Помогает сделать веб-приложение устанавливаемым и работающим офлайн: манифест, Service Worker, стратегии кеширования, свой экран установки.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 544 установки · ★ 254
- Автор: curiositech
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/curiositech/some_claude_skills/tree/HEAD/.claude/skills/pwa-expert/SKILL.md
- Обновлён: 2026-09-06
- HTML: https://affpapa.org/nevibecode/skills/pwa-expert

## Что делает

Скилл включается, когда в проекте нужен PWA: манифест с иконками и режимом `standalone`, регистрация Service Worker, обработка `beforeinstallprompt` для собственной кнопки установки, фоновая синхронизация и офлайн-страница. Внутри — разбор того, что делает приложение устанавливаемым: HTTPS, манифест с обязательными полями, Service Worker с обработчиком `fetch` и иконки 192×192 и 512×512.

Отдельная часть — стратегии кеширования. Cache-First для статики, Network-First для API, Stale-While-Revalidate для баланса между свежестью и скоростью. Для каждой указана цена: статика отдаётся из кеша, пока его не обновят, а Network-First без сети просто не работает. Детали реализации лежат в `references/service-worker-patterns.md`, `references/install-prompt.md` и `references/offline-handling.md`.

Скилл не для нативной разработки, не для общей производительности веба и не для серверного рендеринга — для этого авторы отправляют к другим инструментам. Для простого статического сайта накладные расходы PWA могут не окупиться, это повод проверить, нужен ли вам Service Worker вообще. Скилл даёт доступ к `Read`, `Write`, `Edit`, `Bash`, `Grep` и `Glob`, так что он может и читать ваш код, и править файлы.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill pwa-expert -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/pwa-expert/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/pwa-expert/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill pwa-expert -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/pwa-expert/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill pwa-expert -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/pwa-expert/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install curiositech/some_claude_skills pwa-expert
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/pwa-expert/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill pwa-expert -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/curiositech/some_claude_skills --path .claude/skills/pwa-expert
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/pwa-expert/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill pwa-expert -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/curiositech/some_claude_skills/tree/HEAD/.claude/skills/pwa-expert/SKILL.md

## Когда брать
- сделать веб-приложение устанавливаемым на телефон и десктоп
- настроить Service Worker и не сломать обновления
- выбрать стратегию кеширования под статику и под API
- показать свою кнопку установки вместо браузерной
- отдать офлайн-страницу, когда сеть пропала

## Примеры запросов агенту
- Добавь в проект manifest.json и Service Worker, чтобы приложение ставилось на телефон
- Настрой кеширование: статику через cache-first, API через network-first
- Поймай beforeinstallprompt и покажи свою кнопку установки

## Похожие
- [pwa-development](https://affpapa.org/nevibecode/skills/pwa-development.md) — скилл · 4100 установок
- [progressive-web-app](https://affpapa.org/nevibecode/skills/aj-geddes-progressive-web-app.md) — скилл · 522 установки
- [web-performance-optimization](https://affpapa.org/nevibecode/skills/secondsky-web-performance-optimization.md) — скилл · 557 установок
- [mobile-native](https://affpapa.org/nevibecode/skills/mobile-native.md) — скилл · 86600 установок
- [webapp-to-capacitor](https://affpapa.org/nevibecode/skills/webapp-to-capacitor.md) — скилл · 665 установок
- [chrome-extension](https://affpapa.org/nevibecode/skills/chrome-extension.md) — скилл · 4500 установок

Из того же набора: [curiositech/some_claude_skills](https://affpapa.org/nevibecode/by/curiositech/some_claude_skills.md) — 20 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md