pwa-development by jwynia/agent-skills
npx skills add https://github.com/jwynia/agent-skills --skill pwa-development为 React 和 Svelte 应用程序实现渐进式 Web 应用功能,包括 Service Worker、缓存策略、离线支持和安装提示。
在以下情况下使用此技能:
在以下情况下请勿使用此技能:
将离线行为视为事后考虑会导致 PWA 失败。 PWA 不是“为现有应用添加 Service Worker”。它是关于数据流、缓存和连接失败的根本性架构决策。
症状: 没有 manifest.json,没有 Service Worker,仅限在线
干预措施:
scripts/manifest-generator.ts 以创建 manifest<link rel="manifest">scripts/sw-scaffolder.ts 生成最小的 Service Worker广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
症状: Manifest 存在但缺少 Service Worker,离线时崩溃
关键问题:
干预措施:
scripts/cache-strategy-advisor.ts症状: 内容陈旧,出现意外的缓存行为
干预措施:
scripts/pwa-audit.ts 进行审计data/caching-strategies.json 将资源映射到策略症状: 用户停留在旧版本,需要多次刷新
干预措施:
assets/update-prompt.tsx)症状: 用户操作在离线时丢失,没有同步指示器
干预措施:
症状: 在 Android 上工作正常,在 iOS 上崩溃
干预措施:
data/ios-quirks.json指标: Lighthouse PWA 得分 100,离线工作正常,更新干净利落
| 策略 | 适用场景 | 行为 |
|---|---|---|
| 缓存优先 | 静态资源、字体 | 从缓存提供,后台更新 |
| 网络优先 | API 数据、用户内容 | 尝试网络,回退到缓存 |
| 陈旧时重新验证 | 半静态内容 | 提供陈旧内容,为下次更新缓存 |
| 仅限网络 | 认证、实时数据 | 始终使用网络,不缓存 |
| 脚本 | 用途 |
|---|---|
manifest-generator.ts | 生成 manifest.json |
sw-scaffolder.ts | 生成 Service Worker |
cache-strategy-advisor.ts | 推荐缓存策略 |
pwa-audit.ts | 验证 PWA 配置 |
预缓存所有资源 - 巨大的初始下载量。修复: 仅预缓存关键的应用外壳。运行时缓存内容。
缓存永不失效 - 内容永远陈旧。修复: 缓存版本控制,激活时删除旧的,设置最大寿命。
强制更新而不通知用户。修复: 通知用户,让他们选择何时刷新。
为 Chrome 构建,最后才测试 iOS。修复: 尽早测试 iOS。接受 iOS 的限制。
npm i -D vite-plugin-pwa
npm i -D @vite-pwa/sveltekit
npm i next-pwa
有关配置,请参阅 data/framework-patterns.json。
每周安装次数
120
代码仓库
GitHub 星标数
37
首次出现
Jan 20, 2026
安全审计
已安装于
opencode104
codex101
gemini-cli100
github-copilot95
cursor90
amp79
Implement Progressive Web App features including service workers, caching strategies, offline support, and installation prompts for React and Svelte applications.
Use this skill when:
Do NOT use this skill when:
PWAs fail when offline behavior is an afterthought. A PWA is not "add service worker to existing app." It's a fundamental architectural decision about data flow, caching, and connectivity failure.
Symptoms: No manifest.json, no service worker, online-only
Interventions:
scripts/manifest-generator.ts to create manifest<link rel="manifest"> to HTML headscripts/sw-scaffolder.tsSymptoms: Manifest exists but SW missing, breaks offline
Key Questions:
Interventions:
scripts/cache-strategy-advisor.tsSymptoms: Stale content, unexpected caching behavior
Interventions:
scripts/pwa-audit.tsdata/caching-strategies.jsonSymptoms: Users stuck on old versions, multiple refreshes needed
Interventions:
assets/update-prompt.tsx)Symptoms: User actions lost offline, no sync indicator
Interventions:
Symptoms: Works on Android, breaks on iOS
Interventions:
data/ios-quirks.jsonIndicators: Lighthouse PWA 100, works offline, updates cleanly
| Strategy | Use For | Behavior |
|---|---|---|
| Cache First | Static assets, fonts | Serve from cache, update in background |
| Network First | API data, user content | Try network, fall back to cache |
| Stale While Revalidate | Semi-static content | Serve stale, update cache for next time |
| Network Only | Auth, real-time data | Always network, no caching |
| Script | Purpose |
|---|---|
manifest-generator.ts | Generate manifest.json |
sw-scaffolder.ts | Generate service worker |
cache-strategy-advisor.ts | Recommend caching strategies |
pwa-audit.ts | Validate PWA configuration |
Precaching every asset - massive initial download. Fix: Precache only critical app shell. Runtime cache content.
Never expiring caches - stale content forever. Fix: Cache versioning, delete old on activate, set max age.
Forcing updates without notification. Fix: Notify user, let them choose when to refresh.
Building for Chrome, testing iOS last. Fix: Test iOS early. Accept iOS limitations.
npm i -D vite-plugin-pwa
npm i -D @vite-pwa/sveltekit
npm i next-pwa
See data/framework-patterns.json for configuration.
Weekly Installs
120
Repository
GitHub Stars
37
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode104
codex101
gemini-cli100
github-copilot95
cursor90
amp79
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
4,400 周安装