pwa-development_skill

Overview

This skill teaches Progressive Web App development focused on service workers, caching strategies, offline UX, and Workbox integration. It provides opinionated, security-first patterns for manifest configuration, service worker lifecycle, runtime caching, and installability. Use it to make web apps fast, reliable, and installable across devices.

How this skill works

The skill inspects and codifies core PWA requirements: HTTPS, a service worker with fetch handlers, and a complete web app manifest. It outlines practical service worker patterns (install/activate/fetch), caching strategies (Cache First, Network First, Stale-While-Revalidate), and examples using Workbox for precaching, runtime caching, background sync, and cache expiration. It also covers offline UI and connection status handling for a graceful offline experience.

When to use it

• Building an installable web app that should work offline or on flaky networks
• Improving perceived performance for static assets and images
• Caching API responses while keeping data fresh
• Adding installability via a robust web app manifest and icons
• Integrating Workbox for automated precaching and runtime caching policies

Best practices

• Serve the site over HTTPS (localhost allowed for dev) and register a service worker with a fetch handler
• Provide a complete manifest with name, short_name, start_url, display, theme/background colors, and 192/512 icons plus a maskable icon
• Choose caching per resource: Cache First for static assets, Network First for APIs, Stale-While-Revalidate for semi-static content
• Version caches and delete old caches during activate to avoid stale storage and control rollout
• Use Workbox for precaching, revisioned assets, runtimeCaching rules, background sync, and automatic cleanup

Example use cases

• Offline-first marketing site: cache HTML/CSS/JS and serve offline.html as fallback
• News or blog app: Stale-While-Revalidate for articles and Cache First for images
• Client app with APIs: Network First for /api/ endpoints and Background Sync for queued form submissions
• Vite or Webpack app: use VitePWA or workbox-webpack-plugin to generate precache manifest and runtime caching rules
• E-commerce PWA: ensure installability, add shortcuts, and cache product images with expiration