ブラウザゲームをホーム画面に追加させる：PWAの最小構成

ホーム画面追加が成立する条件

iOSとAndroidでは挙動が異なります。AndroidのChromeは一定条件を満たすと「ホーム画面に追加」のバナーやボタンを自動表示します。iOSのSafariはバナーを自動表示せず、ユーザーが共有メニューから「ホーム画面に追加」を選ぶ操作を自分でする必要があります。どちらにも共通する最低条件は次の3点です。

• HTTPS で配信されていること（localhostは開発時のみ例外）
• Webアプリマニフェストが正しく読み込まれていること
• Service Worker が登録されていること

この3点を満たすだけで「ホーム画面に追加できる状態」になります。Androidではさらにマニフェストに start_url と192px・512pxのアイコンが含まれると、Chromeがインストールプロンプトを出しやすくなります。

マニフェストファイルを書く

manifest.json（またはmanifest.webmanifest）という名前で作成します。最低限の内容は以下のとおりです。

{
  "name": "あなたのゲームタイトル",
  "short_name": "短いタイトル",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

display を standalone にすると、ホーム画面から起動したときにブラウザのアドレスバーが消え、アプリらしい見た目になります。fullscreen にするとさらにステータスバーも消えますが、iOSでは効かない場合があります。ゲームの画面サイズ設計に合わせて選んでください。

start_url はゲームの起点となるパスを指定します。サブディレクトリに置く場合は "./index.html" のように相対パスで書くと安全です。

アイコン画像は透過PNGで用意します。192px と 512px の2サイズが必須で、iOSが参照する180pxサイズ（apple-touch-icon）は後述のHTML側で別途指定します。デザインは正方形の余白付きが無難で、端まで絵柄を詰めるとOSがアイコンを丸くクリップした際に見切れることがあります。

Service Worker を最小限に書く

Service Worker はブラウザとサーバーの間に入るスクリプトです。PWAの文脈では「インストール可能」の条件を満たすために必要ですが、ホーム画面追加だけが目的なら何もしないWorkerでも動作します。sw.js として保存します。

self.addEventListener('install', () => {});
self.addEventListener('fetch', (event) => {
  event.respondWith(fetch(event.request));
});

fetch イベントをそのまま通過させているだけです。キャッシュ制御やオフライン対応を加えたいときはここを拡張しますが、まずはこの形で十分です。

Service Workerはファイルを置いたディレクトリ以下にしか「スコープ」が効きません。ゲームファイルがルートにあるなら sw.js もルートに置いてください。サブディレクトリに置くとスコープが狭まり、ゲーム本体を制御できなくなります。

HTMLに3行追加する

<head> 内に次を加えます。

<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#000000">
<link rel="apple-touch-icon" href="icon-180.png">

apple-touch-icon はiOSがホーム画面アイコンに使う画像です。マニフェストのiconとは別にHTMLで指定する必要があります。180px × 180px の PNG を用意してください。

続いて <body> の末尾、または任意のスクリプト内でService Workerを登録します。

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js');
  }
</script>

if で存在チェックをしているのは、Service Workerに対応していない古いブラウザでエラーが出ないようにするためです。

動作確認のしかた

ローカルでのテストはChromeのDevToolsを使います。「Application」タブを開き、「Manifest」と「Service Workers」の項目にエラーが出ていないかを確認します。「Manifest」のセクションに installability という項目があり、条件が満たされているかどうかをリスト形式で確認できます。

実機テストはAndroid + Chromeが最も確認しやすいです。条件を満たすとアドレスバー下部に「ホーム画面に追加」のボタンが表示されます。表示されない場合は、Chromeのメニューから手動で「ホーム画面に追加」を選んで動作自体は確認できます。

iOSはSafariで開き、共有ボタン（四角から矢印が出るアイコン）を押してリストに「ホーム画面に追加」が出ることを確認します。iOSではアイコンのサイズやマニフェストの内容に関わらずこの操作は常に出るため、apple-touch-icon が正しく表示されるかどうかを目で確認することが現実的な検証方法です。

HTTPS配信が必須のため、ローカルファイルから開いたHTMLでは動作しません。GitHubPagesやNetlifyのような無料の静的ホスティングを開発中の確認用に使うと手間が少ないです。アソバースにZIPで投稿すればHTTPSは自動で満たされます。

失敗しやすい点と対処

アイコンが反映されない：ブラウザはマニフェストとアイコン画像を積極的にキャッシュします。変更が反映されないときは DevTools の「Application → Service Workers」で「Update on reload」をオンにするか、シークレットウィンドウで確認します。

Service Workerが更新されない：sw.js を修正してもブラウザが古いWorkerを使い続けることがあります。開発中は DevTools の「Application → Service Workers → Skipwaiting」を押すと強制的に新しいWorkerに切り替わります。

スコープのミス：ゲームが/game/以下にあるのにsw.jsを/に置いてある、または逆のケースでうまく動かないことがあります。HTMLとsw.jsは同じディレクトリに置くのが最も安全です。

start_url のパスがずれる：CDNやサブディレクトリ配信では start_url が実際の配信パスと一致していないとインストール後に404になります。相対パス（./）で書いておくと配信場所が変わっても追従しやすいです。

次の行動

manifest.json・sw.js・アイコン2枚（192px・512px）・HTMLへの3行追記という最小構成を手元で試し、ChromeのDevTools「Application」タブでエラーがないことを確認してください。動作が確認できたらZIPにまとめてアソバースに投稿すれば、HTTPS要件は自動で満たされます。オフラインキャッシュやインストールプロンプトの制御など発展的な機能は、まずこの最小構成を動かしてから足していくのが最も確実です。

参考資料

• MDN Web Docs「Web app manifests」
• MDN Web Docs「Service Worker API」
• web.dev「Learn PWA」
• Chrome Developers「Add to Home Screen criteria」