【Web開発】サイトをアプリ化！PWAの「インストールボタン」を実装する方法

当サイト（Play Spot）には、スマホのメニュー内に「📱 アプリとしてインストール」というボタンがあります。
これはネイティブアプリ（App Storeなど）ではなく、Webサイトをアプリのように扱える技術「PWA (Progressive Web Apps)」を利用しています。
今回は、このインストールボタンを自作する方法を解説します。

📂 必要な準備：manifest.json

まず、サイトのルートディレクトリに `manifest.json` というファイルを置く必要があります。
ここでアプリの名前やアイコン、起動時の表示モード（全画面など）を定義します。

{
  "name": "Play Spot",
  "short_name": "Play Spot",
  "start_url": "/?mode=standalone",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3498db",
  "icons": [ ... ]
}

💻 JavaScriptでの制御

ブラウザの標準機能では、条件が揃うと勝手に「ホームに追加しませんか？」というバナーが出ますが、邪魔になることがあります。
そこで、「自動表示をキャンセルし、自分の好きなタイミング（ボタンクリック）で表示する」ように制御します。

1. イベントをキャッチして保存する

`beforeinstallprompt` というイベントが発火したタイミングで、それを変数に保存しておきます。

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    // ブラウザ標準のバナーを出さないようにする
    e.preventDefault();
    // イベントを変数に保存
    deferredPrompt = e;
    // 自作のインストールボタンを表示する
    document.getElementById('install-btn').style.display = 'block';
});

2. ボタンが押されたらプロンプトを出す

ユーザーがボタンをクリックしたら、保存しておいたイベントを使ってインストール画面を呼び出します。

installBtn.addEventListener('click', (e) => {
    if (deferredPrompt) {
        // インストール画面を表示
        deferredPrompt.prompt();
        // 使い終わった変数をクリア
        deferredPrompt = null;
    }
});

🎉 まとめ

PWA対応しておくと、ユーザーのホーム画面にアイコンを置いてもらえ、リピート率向上につながります。
特にゲームサイトとは相性が抜群なので、ぜひ導入してみてください。