Pwa Development
Add installable, offline-ready Progressive Web App behavior to an existing web app with service workers, caching, and a web app manifest.
Overview
pwa-development is an agent skill for the Build phase that guides Progressive Web App implementation—HTTPS, service workers, caching strategies, offline behavior, and Workbox—for solo builders shipping web products.
Install
npx skills add https://github.com/alinaqi/claude-bootstrap --skill pwa-developmentWhat is this skill?
- Documents the three PWA pillars: HTTPS, service worker, and web app manifest
- Covers service worker lifecycle, caching strategies, and offline support patterns
- Workbox-oriented guidance for production caching configuration
- Path triggers for sw.*, service-worker.*, workbox-config.*, and manifest.json
- Medium-effort skill scoped to when you are explicitly building PWA features
- Three core PWA pillars: HTTPS, service worker, and web app manifest
Adoption & trust: 1.9k installs on skills.sh; 691 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a web app that feels fragile offline and cannot be installed, and you need a structured way to add service workers, manifests, and caching without missing PWA fundamentals.
Who is it for?
Indie SaaS or content sites moving from SPA-only delivery to installable, offline-tolerant PWAs on HTTPS.
Skip if: Teams that only need a marketing landing page with no offline or install goals, or native iOS/Android store apps with no web shell.
When should I use this skill?
When building PWA features—service workers, caching, offline support.
What do I get? / Deliverables
After following the skill, you have aligned HTTPS, manifest, and service-worker plans (including Workbox-style caching) so the app can load offline, cache predictably, and meet installability requirements.
- web app manifest.json
- service worker implementation
- caching/offline strategy aligned to Workbox or hand-rolled SW
Recommended Skills
Journey fit
PWA work is product engineering on the client surface—manifest, service worker, and caching—before or alongside ship-ready web delivery. Service workers, Workbox, and manifest.json live in the frontend build path and path globs target sw.*, manifest.json, and workbox-config.
How it compares
Use for procedural PWA architecture and caching patterns instead of guessing service-worker snippets in generic frontend chat.
Common Questions / FAQ
Who is pwa-development for?
Solo and indie builders using AI coding agents on React, Vue, or vanilla web stacks who need offline support, install prompts, and production caching via service workers and manifests.
When should I use pwa-development?
Use it during Build (frontend) when adding or refactoring service workers, manifest.json, or Workbox config, and again before Ship if you are hardening cache busting and offline fallbacks for release.
Is pwa-development safe to install?
Review the Security Audits panel on this Prism page for the parent package; the skill itself is documentation-only and does not execute shell or network calls unless your agent applies generated worker code in your repo.
SKILL.md
READMESKILL.md - Pwa Development
# PWA Development Skill **Purpose:** Build Progressive Web Apps that work offline, install like native apps, and deliver fast, reliable experiences across all devices. --- ## Core PWA Requirements ``` ┌─────────────────────────────────────────────────────────────────┐ │ THE THREE PILLARS OF PWA │ │ ───────────────────────────────────────────────────────────── │ │ │ │ 1. HTTPS │ │ Required for service workers and security. │ │ localhost allowed for development. │ │ │ │ 2. SERVICE WORKER │ │ JavaScript that runs in background. │ │ Enables offline, caching, push notifications. │ │ │ │ 3. WEB APP MANIFEST │ │ JSON file describing app metadata. │ │ Enables installation and app-like experience. │ ├─────────────────────────────────────────────────────────────────┤ │ INSTALLABILITY CRITERIA (Chrome) │ │ ───────────────────────────────────────────────────────────── │ │ • HTTPS (or localhost) │ │ • Service worker with fetch handler │ │ • Web app manifest with: name, icons (192px + 512px), │ │ start_url, display: standalone/fullscreen/minimal-ui │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## Web App Manifest ### Required Fields ```json { "name": "My Progressive Web App", "short_name": "MyPWA", "description": "A description of what the app does", "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" }, { "src": "/icons/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] } ``` ### Enhanced Manifest (Full Features) ```json { "name": "My Progressive Web App", "short_name": "MyPWA", "description": "A full-featured PWA", "start_url": "/?source=pwa", "scope": "/", "display": "standalone", "orientation": "portrait-primary", "background_color": "#ffffff", "theme_color": "#3367D6", "dir": "ltr", "lang": "en", "categories": ["productivity", "utilities"], "icons": [ { "src": "/icons/icon-72.png", "sizes": "72x72", "type": "image/png" }, { "src": "/icons/icon-96.png", "sizes": "96x96", "type": "image/png" }, { "src": "/icons/icon-128.png", "sizes": "128x128", "type": "image/png" }, { "src": "/icons/icon-144.png", "sizes": "144x144", "type": "image/png" }, { "src": "/icons/icon-152.png", "sizes": "152x152", "type": "image/png" }, { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-384.png", "sizes": "384x384", "type": "image/png" }, { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }, { "src": "/icons/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ], "screenshots": [ { "src": "/screenshots/desktop.png", "sizes": "1280x720", "