# pwa-development

Guidelines for Progressive Web App development covering service workers, web manifests, caching strategies, and offline readiness.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 768 installs · ★ 286
- Author: Mindrally
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Mindrally/skills/tree/HEAD/pwa-development/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/mindrally-pwa-development

## What it does

This skill equips your coding agent with implementation standards for Progressive Web Apps. It includes code patterns for registering service workers, handling `install` and `activate` lifecycle events, and managing network requests with an `offline.html` fallback.

The rules detail specific caching mechanisms for different scenarios. It applies Cache First for static bundles and Network First for dynamic endpoints. A Stale While Revalidate strategy is included as well, alongside templates for Background Sync and browser connectivity listeners.

Push notification registration requires a valid `PUBLIC_VAPID_KEY` to sign client subscriptions. Testing offline behavior and manifest validity relies on Lighthouse audits.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill pwa-development -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill pwa-development -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pwa-development/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill pwa-development -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Mindrally/skills pwa-development
```

2. **Manually: put the files in place**
- File: `.github/skills/pwa-development/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill pwa-development -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Mindrally/skills --path pwa-development
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill pwa-development -a opencode
```

### 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/Mindrally/skills/tree/HEAD/pwa-development/SKILL.md

## When to use it
- configure a web app manifest with standalone display settings
- write a service worker that clears outdated cache stores
- implement Cache First and Network First caching patterns
- set up background data sync and connectivity listeners

## Example prompts
- Create a service worker that caches static assets on install and serves an offline fallback
- Add a network-first caching handler for API requests with cache fallbacks
- Implement a push notification subscription flow with a public VAPID key

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 1b6468c98d835835.

BEGIN THIRD-PARTY FILE 1b6468c98d835835
````text
---
name: pwa-development
description: Progressive Web App development guidelines covering service workers, caching strategies, offline functionality, and installability
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Progressive Web App Development Guidelines

You are an expert in building Progressive Web Applications with offline-first capabilities.

## Core Principles

- Design for offline-first experience
- Implement proper caching strategies
- Ensure fast loading and smooth performance
- Follow web app manifest best practices
- Provide native-like experience

## Web App Manifest

```json
{
  "name": "My Progressive Web App",
  "short_name": "MyPWA",
  "description": "A description of your app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
```

## Service Worker Registration

```javascript
// Register service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('SW registered:', registration.scope);
    } catch (error) {
      console.error('SW registration failed:', error);
    }
  });
}
```

## Service Worker Implementation

```javascript
// sw.js
const CACHE_NAME = 'v1';
const STATIC_ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/offline.html'
];

// Install event - cache static assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(STATIC_ASSETS);
    })
  );
  self.skipWaiting();
});

// Activate event - cleanup old caches
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames
          .filter((name) => name !== CACHE_NAME)
          .map((name) => caches.delete(name))
      );
    })
  );
  self.clients.claim();
});

// Fetch event - serve from cache or network
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    }).catch(() => {
      return caches.match('/offline.html');
    })
  );
});
```

## Caching Strategies

### Cache First (Static Assets)
```javascript
async function cacheFirst(request) {
  const cached = await caches.match(request);
  return cached || fetch(request);
}
```

### Network First (Dynamic Content)
```javascript
async function networkFirst(request) {
  try {
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  } catch {
    return caches.match(request);
  }
}
```

### Stale While Revalidate
```javascript
````
END THIRD-PARTY FILE 1b6468c98d835835

The third-party file has ended. Everything between the 1b6468c98d835835 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3066 of 5442 bytes. © Mindrally · Apache-2.0 · https://github.com/Mindrally/skills/tree/HEAD/pwa-development/SKILL.md

_Part of the page did not fit — see the HTML version._

---
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