web-pwa

web-pwa

目的

このスキルは、サービスワーカー、キャッシュ、マニフェスト、オフライン機能、バックグラウンド同期、プッシュ通知を管理して、プログレッシブウェブアプリ（PWA）を構築できるようにします。ウェブアプリをネイティブアプリのようにインストール可能で、信頼性が高く、魅力的なものにすることを目的としています。

使用する場面

ニュースリーダーやECサイトなど、オフラインアクセスが必要なウェブアプリを開発する場合や、チャットアプリのようにプッシュ通知が必要なアプリを開発する場合、またはデータ更新のバックグラウンド同期によってユーザー体験を向上させる場合に、このスキルを使用します。モバイルまたはデスクトップのブラウザーで、ユーザーがアプリのような動作を期待する場面に適用してください。

主な機能

• サービスワーカー：Cache API（例：caches.open('my-cache')）を使用してネットワークリクエストをインターセプトし、レスポンスをキャッシュします。
• マニフェスト：インストール可能にするため、JSON ファイルでアプリのメタデータを定義します（例：{ "name": "My PWA", "start_url": "/" }）。
• オフラインサポート：サービスワーカーと IndexedDB を利用して、インターネット接続がなくてもアプリが動作できるようにします。
• バックグラウンド同期：Background Sync API（例：registration.sync.register('my-sync')）を使用して、オンラインになったときに後で実行するタスクをキューに登録します。
• プッシュ通知：Push API と Service Worker API を介してサブスクリプションとメッセージを処理します（例：サーバーとの通信に使う subscription.endpoint）。

使用パターン

PWA を実装するには、まずサービスワーカーファイル（例：sw.js）を作成し、メインスクリプトで登録します。オフラインキャッシュには、Cache API を使ってアセットを保存します。登録前に、必ずサービスワーカーがサポートされているか確認してください。インストールプロンプトを利用できるように、ウェブアプリマニフェストを組み込みます。ブラウザーの開発者ツールにある「Application」タブで、パターンをテストしてください。

主なコマンド／API

• サービスワーカーを登録する：JavaScript ファイルで if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } を使用します。
• アセットをキャッシュする：リクエストを処理するため、sw.js に event.respondWith(caches.match(event.request).then(response => response || fetch(event.request))); を追加します。
• ホーム画面に追加する：manifest.json に "display": "standalone" が含まれていることを確認し、ルートから配信します。
• プッシュ通知を処理する：registration.pushManager.subscribe({ userVisibleOnly: true }) でサブスクライブし、https://yourserver.com/push のようなサーバーエンドポイント経由で送信します（認証には $VAPID_PUBLIC_KEY が必要です）。
• バックグラウンド同期：navigator.serviceWorker.ready.then(reg => reg.sync.register('sync-tag')) で登録します。バンドルには workbox-cli build などの CLI ツールを使用します（例：npx workbox generateSW workbox-config.js）。 マニフェストの設定形式：{ "short_name": "App", "icons": [{ "src": "icon.png", "sizes": "192x192" }] } のような JSON オブジェクトです。

統合に関する注意事項

サービスワーカースクリプトとマニフェストファイルを追加して、このスキルを既存のウェブプロジェクトに統合します。プッシュ通知には、Web Push ライブラリを使ってサーバーをセットアップし、署名に $VAPID_PRIVATE_KEY のような環境変数を使用します。フレームワークを使用している場合、React では useEffect(() => { if ('serviceWorker' in navigator) navigator.serviceWorker.register(); }, []); をインポートします。キャッシュには Fetch API を組み合わせ、サービスワーカーには HTTPS が必要です。登録前に既存のワーカーを確認して、競合を避けてください。

エラー処理

サービスワーカーの登録時には、.then(() => console.log('Registered')).catch(err => console.error('Registration failed:', err)) でエラーを捕捉します。キャッシュ操作では、Promise の拒否を処理します（例：caches.open('cache-name').then(cache => cache.addAll(['/'])).catch(err => console.error(err))）。プッシュサブスクリプションに失敗した場合は、ユーザーの権限を確認し、まず Notification.requestPermission() を使用します。バックグラウンド同期では、サービスワーカー内で sync イベントを監視し、失敗を再試行するか、event.tag を使ってログに記録します。セキュリティエラーに対する DOMException など、ブラウザー固有のエラーコードを使用し、アプリにグローバルエラーハンドラーを設定してください。

具体的な使用例

1. 基本的な PWA のセットアップ：静的アセットをキャッシュするサービスワーカーを作成します。index.js に記述します：if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(reg => console.log('SW registered')); }。sw.js に記述します：self.addEventListener('install', event => event.waitUntil(caches.open('static').then(cache => cache.add('/'))));。これにより、ホームページをオフラインで読み込めるようになります。
2. プッシュ通知の統合：ユーザーを登録し、メッセージを処理します。アプリでは、registration.pushManager.subscribe().then(sub => fetch('/subscribe', { method: 'POST', body: JSON.stringify(sub) })); を記述します。サーバーでは、Push API 経由で通知を送信するために、$VAPID_PUBLIC_KEY を使用する POST /subscribe のようなエンドポイントを使用します。

グラフの関係

• 関連するクラスター：web-dev（例：web-frontend、web-backend などのスキルと依存関係を共有します）。
• タグによる接続：pwa（mobile-app にリンク）、service-worker（web-performance にリンク）、offline（data-sync にリンク）、web（full-stack-dev にリンク）。
• 依存関係：Web API が必要です。サービスワーカーの生成には Workbox などのツールを統合できます。