progressive-web-app

secondsky's avatarfrom secondsky

Progressive Web Apps with service workers, web manifest, offline support, installation prompts. Use for installable web apps, offline functionality, push notifications, or encountering service worker registration, cache strategy, manifest configuration errors.

⭐9stars🔀0forks📁View on GitHub🕐Updated Jan 1, 2026
[Code Generation]

When & Why to Use This Skill

This Progressive Web App (PWA) Claude skill empowers developers to build high-performance, installable web applications that offer a native-like experience. It provides essential boilerplate and implementation logic for service workers, web manifests, and offline support, helping to bridge the gap between web and mobile platforms through advanced caching strategies and push notifications.

Use Cases

  • Converting existing websites into installable Progressive Web Apps with custom manifests and splash screens.
  • Implementing offline-first functionality using service worker caching strategies to ensure reliability in low-connectivity environments.
  • Integrating push notification systems to enhance user re-engagement and deliver real-time updates.
  • Configuring the Web App Manifest to define display modes, theme colors, and multi-platform icon sets.
  • Troubleshooting and debugging service worker registration, lifecycle events, and cache-busting logic.
nameprogressive-web-app
descriptionProgressive Web Apps with service workers, web manifest, offline support, installation prompts. Use for installable web apps, offline functionality, push notifications, or encountering service worker registration, cache strategy, manifest configuration errors.
licenseMIT

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;

      return fetch(event.request).then(response => {
        if (response.status === 200) {
          const clone = response.clone();
          caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));
        }
        return response;
      });
    })
  );
});

Install Prompt

let deferredPrompt;

window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallButton();
});

async function installApp() {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log('Install outcome:', outcome);
  deferredPrompt = null;
}

Push Notifications

async function subscribeToPush() {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: VAPID_PUBLIC_KEY
  });
  await sendSubscriptionToServer(subscription);
}

PWA Checklist

  • HTTPS enabled
  • Web manifest configured
  • Service worker registered
  • Offline fallback page
  • Responsive design
  • Fast loading (<3s on 3G)
  • Installable