PWA開発

service workers、キャッシング戦略、オフラインサポート、およびインストールプロンプトを含むProgressive Web App機能をReactおよびSvelteアプリケーションに実装します。

このスキルを使う場合

以下の場合にこのスキルを使用してください:

• ウェブアプリにPWA機能を追加する
• オフラインサポートを実装する
• service workerキャッシング戦略を作成する
• PWAインストール問題をデバッグする
• iOSに固有のPWA問題に対応する

以下の場合はこのスキルを使用しないでください:

• バックエンドAPIを構築する
• 要件/設計に取り組む(最初にそれらのスキルを使用)
• 複雑なオフラインファースト・アーキテクチャが必要(最初に設計)

コアプリンシパル

PWAは、オフライン動作が事後的に考慮される場合に失敗します。 PWAは「既存アプリにservice workerを追加する」ではなく、データフロー、キャッシング、接続失敗に関する根本的なアーキテクチャの決定です。

診断状態

P0: PWAセットアップなし

症状: manifest.jsonなし、service workerなし、オンラインのみ

対応:

• scripts/manifest-generator.tsを実行してmanifestを作成
• HTMLヘッドに<link rel="manifest">を追加
• scripts/sw-scaffolder.tsで最小限のSWを生成

P1: 基本的なマニフェストのみ

症状: Manifestは存在するがSWがない、オフラインで動作しない

重要な質問:

• どのコンテンツは必ずオフラインで利用可能にする必要があるか?
• 常に新しい状態にするべき(ネットワークファースト)のは何か?

対応:

• scripts/cache-strategy-advisor.tsを使用
• app shellパターンを実装
• オフラインフォールバックページを追加

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メタタグを追加
• ストレージ削除を適切に処理

P6: 本番対応

指標: Lighthouse PWA 100、オフラインで動作、更新がスムーズ

キャッシング戦略

戦略	用途	動作
Cache First	静的アセット、フォント	キャッシュから提供、バックグラウンドで更新
Network First	APIデータ、ユーザーコンテンツ	ネットワークを試す、キャッシュにフォールバック
Stale While Revalidate	半静的コンテンツ	古いデータを提供、次回のためにキャッシュを更新
Network Only	認証、リアルタイムデータ	常にネットワーク、キャッシングなし

利用可能なスクリプト

スクリプト	目的
manifest-generator.ts	manifest.jsonを生成
sw-scaffolder.ts	service workerを生成
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を参照してください。

デバッグチェックリスト

1. DevTools > Application > Manifest - 有効か?
2. DevTools > Application > Service Workers - 登録されているか?
3. DevTools > Application > Cache Storage - キャッシュされているのは何か?
4. DevTools > Network > Offline - オフラインで動作するか?
5. Lighthouse > PWA - スコアと失敗?
6. iOS Safari - 実デバイスでテストしたか?

関連スキル

• requirements-analysis - オフライン要件を決定する
• system-design - PWAアーキテクチャの決定
• react-pwa - React固有のPWA実装