AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

PWA Development

An end-to-end PWA playbook covering manifests, service workers, caching strategies, offline UX, and Workbox.

Dev & CodingIntermediate★ 473⑂ 52AI score 9/10Last updated: Nov 9, 2026

What it does

  • Web app manifest: minimum required fields plus a full example with screenshots, shortcuts, share_target, protocol and file handlers — and a checklist.
  • Service worker patterns: ready-to-copy install → activate → fetch lifecycle, old-cache cleanup, and registration code.
  • Caching strategy selection: a table mapping Cache First / Network First / Stale While Revalidate / Network Only / Cache Only to resource types, each with implementation code.
  • Workbox & build tools: vite-plugin-pwa, next-pwa, and CRA setups, plus a hand-written Workbox service worker with expiration and cacheable-response plugins.
  • App-like features: install prompt handling, standalone-mode detection, push notifications, background sync for offline form queues.
  • Testing: Lighthouse CLI command, manual checklists for installability/offline/performance budgets, and a common-mistakes → fix table.

Who it's for

  • Front-end developers turning an existing web app into an installable PWA
  • Teams shipping products that must work on flaky or offline networks
  • Anyone fighting stale service-worker caches after a deploy

Examples

  1. PWA-ify a Vite app: add the VitePWA plugin with runtimeCaching (NetworkFirst for API, CacheFirst for images) to get precaching and offline support.
  2. Offline form submissions: wire Workbox's BackgroundSyncPlugin to /api/submit POSTs so they queue offline and replay automatically.
  3. Custom install flow: intercept beforeinstallprompt to show your own install button, then detect display-mode: standalone to adjust the UI post-install.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/pending/alinaqi/pwa-development/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the pending/alinaqi/pwa-development folder from the GitHub repo aiskillstore/marketplace into my ~/.claude/skills/pwa-development/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore && mkdir -p ~/.claude/skills && cp -r /tmp/aiskillstore/pending/alinaqi/pwa-development ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open your terminal.
  2. Clone the repo: git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore
  3. Create the skills directory: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r /tmp/aiskillstore/pending/alinaqi/pwa-development ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/pwa-development — you should see SKILL.md.
  6. Restart Claude Code.
  7. This skill is auto-triggered (user-invocable: false): it activates when you touch sw.js, service-worker.js, manifest.json, or workbox-config.*, or when you ask for offline/caching work.
  8. (Optional) To use the Workbox examples, install the deps in your project, e.g. npm install vite-plugin-pwa -D.
View source on GitHub ↗