progressive-web-app について
オフライン対応やインストール、Service Worker、Web アプリマニフェストを使ったプログレッシブ Web アプリの構築ガイドです。ブラウザーでアプリのような体験を作る開発者向けです。
主な機能
- 01オフライン対応
- 02Web アプリのインストール
- 03Service Worker の実装
- 04Web アプリマニフェスト
- 05プッシュ通知
活用シーン
- 01アプリのような Web 体験の構築
- 02ネットワークなしでの利用対応
- 03モバイルへのインストール対応
- 04プッシュ通知の追加
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/progressive-web-appを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/install-prompt-and-app-installation.mdoffline-support-with-indexeddb.mdpush-notifications.mdservice-worker-implementation.mdweb-app-manifest.mdtemplates/component-template.tsx詳細
プログレッシブウェブアプリ
目次
概要
オフラインサポート、インストール機能、サービスワーカー、ウェブアプリマニフェストを備えたプログレッシブウェブアプリを構築し、ブラウザーでアプリのような体験を提供します。
使用する場面
- アプリのようなウェブ体験
- オフライン機能が必要な場合
- モバイル端末へのインストールが必要な場合
- プッシュ通知
- 高速な読み込みが求められる場合
クイックスタート
最小限の動作例：
// public/manifest.json
{
"name": "My Awesome App",
"short_name": "AwesomeApp",
"description": "A progressive web application",
"start_url": "/",
"scope": "/",
"display": "standalone",
"orientation": "portrait-primary",
"background_color": "#ffffff",
"theme_color": "#007bff",
"icons": [
{
"src": "/images/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/images/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
// ... (see reference guides for full implementation)
リファレンスガイド
詳細な実装は references/ ディレクトリにあります：
| ガイド | 内容 |
|---|---|
| ウェブアプリマニフェスト | ウェブアプリマニフェスト |
| サービスワーカーの実装 | サービスワーカーの実装 |
| インストールプロンプトとアプリのインストール | インストールプロンプトとアプリのインストール |
| IndexedDBによるオフラインサポート | IndexedDBによるオフラインサポート |
| プッシュ通知 | プッシュ通知 |
ベストプラクティス
✅ 推奨事項
- 確立されたパターンや規約に従います
- 読みやすく保守しやすいコードを書きます
- 適切なドキュメントを追加します
- デプロイ前に十分にテストします
❌ 避けるべきこと
- テストや検証を省略します
- エラー処理を無視します
- 設定値をハードコードします
コメント
Markdown 対応