【ITニュース解説】React PWA Install Prompt for Chrome, Edge and iPhone

WebサイトをスマートフォンやPCのホーム画面に追加して、まるで専用アプリのように使えるようにする技術をPWA（プログレッシブウェブアプリ）と呼ぶ。このPWAをユーザーにホーム画面に追加してもらうための「インストールプロンプト」は、Webサイトの運営者にとってユーザーのエンゲージメントを高める上で非常に重要だ。しかし、このプロンプトの出し方はブラウザやデバイスの種類によって大きく異なるため、開発者はその違いを理解し、適切な対応をする必要がある。

まず、Google ChromeやMicrosoft Edge、Samsung InternetといったChromium系のブラウザでは、「beforeinstallprompt」という特別なイベントが用意されている。これは、WebサイトがPWAとしてインストール可能だとブラウザが判断したときに発する信号のようなものだ。開発者はこのイベントをWebサイト側で受け取ることができる。イベントを受け取った際、ブラウザが自動的に表示する小さなインストールを促すメッセージ（ミニインフォバー）を抑制するために、「event.preventDefault()」を呼び出し、そのイベント自体を一時的に保存しておく。そして、ユーザーがクリックする「インストール」ボタンのような独自のUIを用意し、ユーザーがそのボタンをタップしたときに、保存しておいたイベントの「prompt()」メソッドを呼び出すことで、ブラウザが提供するインストールダイアログ（例えば「このアプリをインストールしますか？」といった表示）を直接開くことができる。

一方で、iPhoneやiPadのSafari、およびiOS上のChrome、Edge、Firefoxなどのブラウザでは、この「beforeinstallprompt」イベントは発火しない。これは、iOSの仕様上、Webサイト側から直接インストールダイアログを呼び出す方法がないためだ。そのため、iPhoneやiPadのユーザーには、インストールまでの具体的な手順をアプリ側で視覚的に案内する必要がある。具体的には、Safariの「共有」ボタン（四角から上矢印が出ているアイコン）をタップし、メニューの中から「ホーム画面に追加」を選ぶ、という一連のステップをユーザーに示さなければならない。macOSのSafari 17以降でも同様に、ファイルメニューから「Dockに追加」する手順を案内することになる。InstagramやTikTokのようなアプリ内ブラウザでは、そもそもインストールパスが存在しないため、プロンプトは表示しない。

Chromium系ブラウザが「beforeinstallprompt」イベントを発火させるためにはいくつかの条件がある。第一に、WebサイトがHTTPS（安全な通信）で提供されていること。第二に、まだアプリとしてインストールされていないこと。そして、PWAの基本情報が書かれた「ウェブマニフェスト（manifest.json）」というファイルが正しく設定されている必要がある。このマニフェストには、アプリの名前や短い名前、ホーム画面に表示されるアイコン画像（192x192ピクセルと512x512ピクセルが推奨）、アプリの起動URL（start_url）、そして表示モード（standaloneなど、ブラウザのUIを隠してアプリのように表示する設定）などが含まれる。さらに、ユーザーがそのページを一度タップし、30秒以上滞在したことがある、といった利用状況も発火条件の一つとなる。これらの条件がすべて満たされて初めて、ブラウザはイベントを発火させるため、開発者はChrome DevToolsのApplicationパネルでマニフェストのエラーを確認できる。PWAのオフライン対応やプッシュ通知などの高度な機能を利用するには、Service Workerという技術も依然として重要となる。

ReactのようなJavaScriptフレームワークを使ってPWAを開発する場合、「beforeinstallprompt」イベントを適切にキャッチする実装には工夫が必要だ。このイベントは、Webサイトが読み込まれてすぐに発火することが多いため、イベントを監視する仕組み（リスナー）が遅れてマウントされるコンポーネント内ではイベントを見逃してしまう可能性がある。そのため、Webサイト全体のレイアウトを管理する一番上位のコンポーネントがマウントされるタイミングで、イベントを監視する仕組みを動かし始めるのが良い方法だ。ReactのuseSyncExternalStoreのようなフックを用いると、このイベントの状態をコンポーネント間で同期し、インストールボタンの表示・非表示を適切に制御できる。

iOSで「ホーム画面に追加」を促す際には、現在のデバイスがiPhoneまたはiPadであること、すでにPWAとしてインストールされている状態（スタンドアローンモード）ではないこと、そしてアプリ内ブラウザではないことを確認する必要がある。そして、Safariの「共有」ボタンの位置や、「ホーム画面に追加」の項目がさらに「View More」のようなメニューの奥にある場合も考慮し、ユーザーに具体的な手順を案内する。iOSのバージョンによってUIが変わる可能性もあるため、柔軟な対応が求められる。

インストールプロンプトは、ユーザー体験を損なわないように、最適なタイミングで表示することが非常に重要だ。 まず、Webサイトにアクセスしたばかりの最初の段階では表示しない。ユーザーがWebサイトの価値をある程度理解し、興味を持った後に促すのが理想的だ。 次に、サインアップ、決済、オンボーディング（初めてアプリを使う際のチュートリアル）など、ユーザーが集中して行っているタスクの途中では表示しない。これはユーザーの作業を中断させ、不快感を与える可能性があるからだ。 すでにPWAとしてインストールされ、ホーム画面から起動しているアプリの中では、当然ながらインストールプロンプトは不要だ。 また、InstagramやTikTokのようなアプリ内ブラウザでは、そもそもPWAのインストール機能がないため、ここでもプロンプトは表示しない。 他のメッセージ（クッキーの同意バナーなど）が表示されているときに、重ねてインストールプロンプトを表示するのも避けるべきだ。 最後に、ユーザーが「今は表示しない」と選択した場合は、すぐに再表示するのではなく、一定期間（例えば数週間）は非表示にする配慮も必要となる。

PWAのオンボーディング（アプリの初期設定やチュートリアル）がある場合、インストールプロンプトはオンボーディングが完了した後に表示するのが効果的だ。ユーザーはオンボーディングを終えてアプリの基本的な使い方や価値を理解した直後なので、ホーム画面に追加するモチベーションが高いと考えられる。また、iOSでプッシュ通知の許可を求める場合、通常のSafariでWebサイトを見ているときではなく、ホーム画面に追加されたアプリとして起動した後に尋ねるなど、プラットフォームの特性を考慮した設計が望ましい。

このように、PWAのインストールプロンプトは、単に「インストール」ボタンを表示すれば良いというものではなく、ブラウザやデバイスの種類、さらにはユーザーの行動やサイトの状況に応じて、非常にきめ細やかな配慮と実装が求められる。記事では、このような複雑な実装を簡単にするための「Wingo UI」というライブラリのコンポーネントが紹介されており、これらを使うことで、プラットフォームの検出、イベントの管理、最適なUIの表示、そしてプロンプトの表示タイミングの制御といった多くの課題を効率的に解決できる。ユーザーに最高の体験を提供し、PWAを有効活用してもらうためには、これらの複雑な要素を理解し、適切に対応することがシステムエンジニアにとって重要な課題となる。