2026 年の Progressive Web Apps は、ブラウザがインストールプロンプトをより目立つようにしたことで インストール率が向上し、これまで以上に強力になっています。このガイドでは、実際にインストールされ、 オフラインで動作し、プッシュ通知を送信する PWA の技術要件をカバーします。
2026 年の PWA 要件
- HTTPS で配信
fetchイベントハンドラーを持つ登録済み Service Worker- 必須フィールドを持つ Web App Manifest
- 192×192 ピクセル以上のアイコン
Web App Manifest
display: standalone はブラウザの UI を取り除きます。インストールされたアプリは ネイティブアプリのように見えます。purpose: maskable — Android の円形アイコン マスクに対応するため、512px アイコンには安全ゾーンのパディングが必要です。
Service Worker：キャッシュ戦略
| 戦略 | 最適なケース | 鮮度 |
|---|---|---|
| Cache First | フォント・画像・静的アセット | キャッシュ期限まで古い |
| Network First | API レスポンス・ユーザーデータ | オンライン時は常に新鮮 |
| Stale While Revalidate | HTML ページ・ニュースフィード | バックグラウンド更新で即座 |
プッシュ通知
VAPID キーはサーバーとプッシュサービス間の認証に必要です。npx web-push generate-vapid-keys で生成します。
インストールプロンプトの UX
アプリがインストール基準を満たすとブラウザが beforeinstallprompt イベントを 発火します。初回訪問時には表示せず、ユーザーがエンゲージメントを示した後に表示します。