progressive-web-app

Implement Progressive Web Apps with service workers, manifests, and offline caching strategies.

1|Updated Aug 17, 2025
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill progressive-web-app-ratnesh-maurya
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: progressive-web-app
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/progressive-web-app
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill progressive-web-app-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web applications fail on unreliable networks and cannot be installed on device home screens like native apps. This Skill guides the implementation of the three PWA pillars — HTTPS, a web app manifest, and a service worker — so a web app works offline and can be installed. ## Core Features & Use Cases - Service Worker Implementation: Provides install, activate, and fetch handlers with cache-first, network-first, and stale-while-revalidate strategies, plus cache versioning and cleanup. - Web App Manifest & Install Flow: Generates manifest.json with maskable icons and screenshots, plus beforeinstallprompt handling for a custom install button. - Platform Edge Cases: Covers iOS Safari quirks (no beforeinstallprompt, apple-mobile-web-app meta tags), HTTPS requirements, and opaque cross-origin responses, with an optional Workbox setup. - Use Case: A user wants their Next.js or static site to load offline and be installable on Android and iOS. The Skill produces index.html, manifest.json, sw.js, app.js, and offline.html with a pre-ship checklist. ## Quick Start Ask the AI to make your web app installable and work offline by adding a manifest and service worker with caching strategies.

Frequently Asked Questions about progressive-web-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my website work offline with a service worker?

Register a service worker that pre-caches your app shell during the install event and intercepts fetch requests with caching strategies. Use network-first for HTML pages with an offline.html fallback, and cache-first for static assets like CSS, JS, and images.

How do I add an install prompt for my PWA?

Listen for the beforeinstallprompt event, call preventDefault() to defer the browser's mini-infobar, and store the event. When the user clicks your custom install button, call prompt() on the stored event and read the outcome from userChoice.

Should I use Workbox or write a service worker by hand?

Hand-written service workers give full control and work well for simple cache-first and network-first strategies. Workbox is better for production apps because it handles cache expiry, versioning, and opaque cross-origin responses automatically.

Does PWA install work on iOS Safari?

Safari supports manifests and service workers but does not fire beforeinstallprompt. Users must install manually via Share then Add to Home Screen, and you should include apple-mobile-web-app meta tags and an apple-touch-icon for proper integration.

Why does my service worker not update after deployment?

Browsers cache the old service worker until all tabs using it close. Increment your CACHE_VERSION constant on every deploy, call skipWaiting() in install and clients.claim() in activate, and delete old caches during the activate event.