【PWA】Webサイトを「アプリ」としてスマホにインストールさせる実装方法

Play Spotのメニューを開くと、「📱 アプリとしてインストール」というボタンが表示されるのをご存知でしょうか？
これはPWA（Progressive Web Apps）という技術を使っています。
App StoreやGoogle Playを通さずに、Webサイトを直接スマホのホーム画面にアイコンとして追加し、ネイティブアプリのように全画面で動かすことができます。

🛠️ 実装に必要な3つの要素

サイトをPWA化するには、最低限以下の3つが必要です。

1. HTTPS化: セキュリティ必須（Play Spotは対応済み）
2. manifest.json: アプリ名やアイコン画像を指定する設定ファイル
3. Service Worker: オフライン動作などを管理するスクリプト

📄 1. manifest.json の設定

サイトのルートに設置している manifest.json の中身はこんな感じです。

{
  "name": "Play Spot",
  "short_name": "Play Spot",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3498db",
  "icons": [
    {
      "src": "/images/icon_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icon_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

"display": "standalone" と指定することで、ブラウザのアドレスバー（URL欄）が消え、ゲーム画面が広く使えるようになります。

🔘 2. インストールボタンの制御 (JavaScript)

ブラウザ標準の「ホームに追加」バナーを勝手に出すのではなく、任意のボタン（メニュー内など）でインストールさせたい場合は、beforeinstallprompt イベントをフックします。

let deferredPrompt;
const installBtn = document.getElementById('btn-install');

// ブラウザが「インストールできるよ」と合図を出したら発火
window.addEventListener('beforeinstallprompt', (e) => {
    // 勝手なバナー表示をキャンセル
    e.preventDefault();
    // イベントを保存しておく
    deferredPrompt = e;
    // 自分のインストールボタンを表示する
    document.getElementById('install-btn-container').style.display = 'block';
});

// ボタンがクリックされたら
installBtn.addEventListener('click', (e) => {
    if (deferredPrompt) {
        // 保存しておいたインストール画面を呼び出す
        deferredPrompt.prompt();
        deferredPrompt = null;
    }
});

👨‍💻 まとめ

PWAを導入すると、ユーザーのホーム画面にアイコンを置いてもらえるため、リピート率（再訪率）が格段に上がります。
ゲームサイトとPWAは非常に相性が良いので、ぜひ導入してみてください。