pwa-shell

Documents the service worker caching, update flow, and offline strategy for an installable PWA.

1|Updated Aug 31, 2026
One-click install
npx skills add https://github.com/gagandeepgill/puzzle-game --skill pwa-shell-gagandeepgill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pwa-shell
Source: https://github.com/gagandeepgill/puzzle-game/tree/main/.claude/skills/pwa-shell
Command: npx skills add https://github.com/gagandeepgill/puzzle-game --skill pwa-shell-gagandeepgill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Progressive web app caching and update behavior is full of silent failure modes: stale service workers serving old builds, updates that never reach installed users, and precache lists that break on every deploy. This Skill captures the hard-won operational knowledge for this arcade's PWA shell so changes to sw.js, the manifest, or offline behavior do not reintroduce fixed bugs. ## Core Features & Use Cases - Cache strategy guidance: Explains the cache-first precache of hand-authored shell files, why Vite-hashed JS/CSS is deliberately excluded, and why individual cache.add calls are used instead of cache.addAll. - Update flow rules: Documents the deliberate no-skipWaiting decision, the waiting-worker detection prompt (src/ui/swUpdate.ts, UpdateBar.tsx), and the three easy-to-get-wrong rules around registration.waiting, installed state, and guarded controllerchange reloads. - Debugging traps: Covers the stale-service-worker trap that makes a correct fix look broken, the stale dist/ build trap, and why the in-app browser pane cannot register a service worker. - Use Case: You rebuilt the app but the browser still shows the old version. This Skill tells you to unregister service workers, delete caches, and rebuild dist/ before concluding your fix failed. ## Quick Start Explain why my PWA change is not showing up in the browser after rebuilding and how the service worker update prompt works.

Frequently Asked Questions about pwa-shell

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

FAQPage Schema
Why is my service worker serving an old build after I deployed a fix?▼

The service worker caches the previous shell and keeps serving it until it is replaced. Unregister all service worker registrations, delete every cache via caches.keys(), rebuild dist/, and reload before concluding the fix did not work.

How do I update a PWA without disrupting a user mid-session?▼

Do not call skipWaiting() on install, since activating a new worker mid-session swaps code out from under the user. Instead detect registration.waiting, show an update prompt, and call skipWaiting() only when the user accepts, then reload on a guarded controllerchange event.

Should I precache Vite-built JS and CSS files in the service worker?▼

No. Vite output filenames carry build hashes that change every deploy, so a literal precache list goes stale immediately. Precache only hand-authored shell files and let hashed assets be picked up by a runtime cache on first visit.

Why does service worker registration fail in an in-app browser?▼

In-app browser panes cannot register service workers at all; a valid same-origin script fails with a fetch error and blob workers are refused. This is an environment limitation, not an app bug, so test registration in a real browser over http.

What Cache-Control header does a service worker script need?▼

Serve sw.js with Cache-Control: public, max-age=0, must-revalidate so browsers check for a new worker on each visit. A cached service worker script cannot announce its own replacement, so updates silently stop reaching users without this header.