Progressive Web App

Creates Progressive Web App configurations that enable web applications to work offline, be installed on devices, and access native-like features. Covers web app manifests, service worker registration, caching strategies (cache-first, network-first, stale-while-revalidate), offline fallback pages, push notifications, background sync, periodic sync, and app installation UX.

Usage

Describe your web application and what PWA features you need. Specify your caching requirements (which resources should work offline), whether you need push notifications, and your target platforms (Android, iOS, desktop). The skill generates manifest.json, service worker code, and integration guidance for your framework.

Examples

• "Add PWA support to my React app with offline caching for static assets and an offline fallback page"
• "Create a service worker with network-first strategy for API calls and cache-first for static assets"
• "Build push notification support with subscription management and a notification click handler"
• "Configure a PWA manifest with proper icons, theme colors, and standalone display mode for iOS"

Guidelines

• Use Workbox library for production service workers instead of writing caching logic from scratch
• Apply cache-first for static assets (CSS, JS, images) and network-first for dynamic API responses
• Implement a stale-while-revalidate strategy for content that changes but tolerates brief staleness
• Set up versioned cache names and clean up old caches in the activate event to prevent storage bloat
• Create a meaningful offline fallback page that explains the situation and offers cached content
• Generate all required icon sizes (192px, 512px minimum) and include maskable icons for Android
• Add apple-mobile-web-app-capable and apple-touch-icon meta tags for iOS PWA support
• Handle the beforeinstallprompt event to show a custom install button at the right moment in the user journey