web-pwa

Purpose

This skill enables building Progressive Web Apps (PWAs) by managing service workers, caching, manifests, offline functionality, background sync, and push notifications. It focuses on making web apps installable, reliable, and engaging like native apps.

When to Use

Use this skill when developing web apps that need offline access, such as news readers or e-commerce sites; for apps requiring push notifications, like chat apps; or when enhancing user experience with background sync for data updates. Apply it in scenarios where users expect app-like behavior on mobile or desktop browsers.

Key Capabilities

• Service Workers: Intercept network requests and cache responses using the Cache API (e.g., caches.open('my-cache')).
• Manifest: Define app metadata in a JSON file (e.g., { "name": "My PWA", "start_url": "/" }) for installability.
• Offline Support: Enable apps to function without internet via service workers and IndexedDB.
• Background Sync: Queue tasks for later execution when online, using the Background Sync API (e.g., registration.sync.register('my-sync')).
• Push Notifications: Handle subscriptions and messages via the Push API and Service Worker API (e.g., subscription.endpoint for server communication).

Usage Patterns

To implement a PWA, first create a service worker file (e.g., sw.js) and register it in your main script. For offline caching, use the Cache API to store assets. Always check for service worker support before registration. Integrate a web app manifest for installation prompts. Test patterns in a browser's dev tools under the Application tab.