PWAプッシュ通知をAIで実装｜プロンプト作例とコード全文

このプロンプトは、PWA（プログressive Web App）のプッシュ通知機能をゼロから実装するデモコードをAIに生成させるものです。Service Workerの登録からVAPID鍵の扱い、購読UIの構築まで要件を細かく列挙することで、フレームワーク不要の自己完結したサンプルを一度に出力させられます。通知許可フローや購読状態管理など、実装で詰まりやすい箇所を網羅的に指定している点が特徴です。

フロントエンドエンジニアがプッシュ通知の動作原理を素早く把握したい場合や、社内勉強会・ハンズオン用の教材を準備する場面に適しています。グラスモーフィズムによるUI指定を外してシンプルな構成にしたり、モックエンドポイントを実際のサーバーURLに置き換えたりすることで、プロトタイプから本番寄りの実装へと段階的に応用できます。