Progressive Web App

This covers the core pieces you need to turn a web app into something users can install and use offline. You get service worker patterns for cache-first fetching, a manifest setup for the home screen icon, and the beforeinstallprompt handler so you can control when to show the install button. The push notification snippet is here too if you need it. Good for when you want your app to feel more native without actually building native, or when offline support matters for your users. The checklist at the end is a practical reminder of what actually needs to happen before browsers will consider it installable.

skills.sh installs: 523
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill progressive-web-app --agent claude-code

Installs into .claude/skills of the current project.

Files

Progressive Web App (PWA)

Build web applications that work like native apps with offline support and installability.

Web App Manifest

{
  "name": "My Application",
  "short_name": "MyApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Service Worker

const CACHE_NAME = 'app-v1';
const STATIC_ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];

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

// Fetch with cache-first strategy
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      if (cached) return cached;

SKILL.md on GitHub