pwa-development について
pwa-development は、React や Svelte のプロジェクトで PWA 機能を実装・診断するスキルです。サービスワーカー、キャッシュ、オフライン動作、更新、iOS 特有の問題を扱います。
主な機能
- 01マニフェストとサービスワーカーの設定ガイド
- 02キャッシュ戦略の提案
- 03オフライン保存と同期のガイド
- 04PWA の監査とデバッグ
- 05iOS 固有の問題の診断
活用シーン
- 01Web アプリへのオフライン対応の追加
- 02古いコンテンツやキャッシュ異常の調査
- 03サービスワーカーの更新動作の修正
- 04iOS での PWA 問題の調査
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/pwa-developmentを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
assets/manifest.json.templateoffline-page.htmlservice-worker-workbox.tsupdate-prompt.svelteupdate-prompt.tsxdata/caching-strategies.jsonframework-patterns.jsonios-quirks.jsonmanifest-options.jsonscripts/cache-strategy-advisor.tsmanifest-generator.tspwa-audit.tssw-scaffolder.ts詳細
PWA 開発
React および Svelte アプリケーションに、サービスワーカー、キャッシュ戦略、オフラインサポート、インストールプロンプトなどのプログレッシブウェブアプリ（PWA）機能を実装します。
このスキルを使用するタイミング
次の場合にこのスキルを使用してください。
- ウェブアプリに PWA 機能を追加する
- オフラインサポートを実装する
- サービスワーカーのキャッシュ戦略を作成する
- PWA のインストールに関する問題をデバッグする
- iOS 固有の PWA の癖に対処する
次の場合はこのスキルを使用しないでください。
- バックエンド API を構築する
- 要件や設計に取り組む（先にそれらのスキルを使用してください）
- 複雑なオフラインファーストのアーキテクチャが必要（先に設計してください）
基本原則
オフライン時の動作を後回しにすると、PWA は失敗します。 PWA は「既存のアプリにサービスワーカーを追加する」ことではありません。データフロー、キャッシュ、接続障害に関する根本的なアーキテクチャ上の決定です。
診断状態
P0：PWA の設定なし
症状： manifest.json なし、サービスワーカーなし、オンライン時のみ動作
対処方法：
scripts/manifest-generator.tsを実行してマニフェストを作成します- HTML の head に
<link rel="manifest">を追加します scripts/sw-scaffolder.tsで最小限の SW を生成します
P1：基本的なマニフェストのみ
症状： マニフェストは存在するものの、SW がなく、オフライン時に動作しない
主な質問：
- オフライン時に必ず利用できる必要があるコンテンツは何ですか？
- 常に最新であるべきもの（ネットワーク優先）は何ですか？
対処方法：
scripts/cache-strategy-advisor.tsを使用します- アプリシェルパターンを実装します
- オフライン用のフォールバックページを追加します
P2：キャッシュの問題
症状： 古いコンテンツ、予期しないキャッシュの動作
対処方法：
scripts/pwa-audit.tsで監査しますdata/caching-strategies.jsonを使ってリソースを戦略に割り当てます- キャッシュの有効期限とクリーンアップを追加します
P3：更新の問題
症状： ユーザーが古いバージョンのままになる、複数回の再読み込みが必要になる
対処方法：
- skipWaiting／clients.claim を適切に実装します
- 更新通知 UI（
assets/update-prompt.tsx）を追加します - 「waiting」状態を適切に処理します
P4：オフラインデータの不足
症状： オフライン時にユーザーの操作が失われる、同期インジケーターがない
対処方法：
- オフラインストレージとして IndexedDB を実装します
- Background Sync API を追加します
- 同期状態 UI を作成します
P5：iOS の問題
症状： Android では動作するが、iOS では動作しない
対処方法：
data/ios-quirks.jsonを確認します- apple-mobile-web-app の meta タグを追加します
- ストレージの削除に適切に対処します
P6：本番環境への準備完了
指標： Lighthouse PWA 100、オフラインで動作し、問題なく更新される
キャッシュ戦略
| 戦略 | 用途 | 動作 |
|---|---|---|
| キャッシュ優先 | 静的アセット、フォント | キャッシュから配信し、バックグラウンドで更新します |
| ネットワーク優先 | API データ、ユーザーコンテンツ | ネットワークを試し、失敗した場合はキャッシュにフォールバックします |
| 古いキャッシュを配信しながら再検証 | 半静的なコンテンツ | 古いコンテンツを配信し、次回に備えてキャッシュを更新します |
| ネットワークのみ | 認証、リアルタイムデータ | 常にネットワークを使用し、キャッシュしません |
利用可能なスクリプト
| スクリプト | 目的 |
|---|---|
manifest-generator.ts | manifest.json を生成します |
sw-scaffolder.ts | サービスワーカーを生成します |
cache-strategy-advisor.ts | キャッシュ戦略を提案します |
pwa-audit.ts | PWA の設定を検証します |
アンチパターン
すべてをキャッシュする
すべてのアセットを事前キャッシュすると、初回ダウンロードが大規模になります。 対処方法： 事前キャッシュするのは重要なアプリシェルだけにします。コンテンツは実行時にキャッシュします。
期限のないキャッシュ
キャッシュを期限切れにしないと、古いコンテンツがいつまでも残ります。 対処方法： キャッシュをバージョン管理し、アクティベート時に古いキャッシュを削除して、有効期限を設定します。
通知のない更新
通知なしに更新を強制します。 対処方法： ユーザーに通知し、いつ再読み込みするかを選べるようにします。
iOS を後回しにする
Chrome 向けに開発し、iOS のテストを最後に行います。 対処方法： 早い段階で iOS をテストします。iOS の制約を受け入れます。
フレームワーク早見表
React + Vite
npm i -D vite-plugin-pwa
SvelteKit
npm i -D @vite-pwa/sveltekit
Next.js
npm i next-pwa
設定については data/framework-patterns.json を参照してください。
デバッグチェックリスト
- DevTools > Application > Manifest - 有効ですか？
- DevTools > Application > Service Workers - 登録されていますか？
- DevTools > Application > Cache Storage - 何がキャッシュされていますか？
- DevTools > Network > Offline - オフラインで動作しますか？
- Lighthouse > PWA - スコアと問題点は？
- iOS Safari - 実機でテストしてください
関連スキル
- requirements-analysis - オフライン要件を決定します
- system-design - PWA のアーキテクチャを決定します
- react-pwa - React 固有の PWA 実装