# progressive-web-app

Guides Claude Code in turning web projects into installable PWAs with offline caching, web app manifests, and custom install prompts.

- skill · `type=skill` · Claude Code · 245 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/web-development/progressive-web-app
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/progressive-web-app

## What it does

This skill provides instructions for generating Progressive Web App setups inside web projects. It helps the assistant assemble the base file structure, including `index.html`, `manifest.json`, the service worker script `sw.js`, and the registration module `app.js`. The model learns to pre-cache the application shell and structure cache versioning properly.

The instructions handle custom installation buttons by capturing the `beforeinstallprompt` browser event. For icons, it configures maskable formats to adapt to mobile screens, while adding meta tags for iOS Safari compatibility. Deployments strictly demand HTTPS for service worker registration, although development works on `localhost`. Leaving out `offline.html` breaks the installation flow.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill web-development/progressive-web-app
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill progressive-web-app -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/progressive-web-app/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/progressive-web-app/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/progressive-web-app/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/progressive-web-app/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates progressive-web-app
```

2. **Manually: put the files in place**
- File: `.github/skills/progressive-web-app/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/progressive-web-app
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/progressive-web-app/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/web-development/progressive-web-app

## When to use it
- Configure `manifest.json` with adaptive maskable icons
- Implement app shell caching in service worker `sw.js`
- Handle `beforeinstallprompt` to trigger install flows manually
- Supply a fallback `offline.html` screen when network requests fail

## Example prompts
- Convert this project into an installable PWA with offline caching
- Generate a web app manifest and service worker registration script
- Add a custom add-to-home-screen prompt button for mobile users

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

## Other versions with the same name
- [progressive-web-app · aj-geddes](https://affpapa.org/en/nevibecode/skills/aj-geddes-progressive-web-app.md) — 522 installs
- [progressive-web-app · secondsky](https://affpapa.org/en/nevibecode/skills/secondsky-progressive-web-app.md) — 500 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 804 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md