「PWAアプリとしてインストールできるページ用」にする完成版HTML

あなたの https://canape2020.stars.ne.jp/index.html をこれを index.html の <head> と <body>末尾に入れてください。

✅ 1 <head>内に追加（必須）

   <!-- PWA設定 -->
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#111827">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Canape">

<!-- Android用アイコン -->
<link rel="icon" sizes="192x192" href="/pwa-icons/icon-192.png">
<link rel="icon" sizes="512x512" href="/pwa-icons/icon-512.png">

✅ 2 <body> の一番下（/body>直前）に追加

  <script>
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker.register("/sw.js")
      .then(function (reg) {
        console.log("SW registered:", reg.scope);
      })
      .catch(function (err) {
        console.log("SW registration failed:", err);
      });
  });
}
</script>

✅ 3 <base> タグはそのままでOK（重要）

   <base href="https://canape2020.stars.ne.jp/" target="_self">

#は削除しないでください（今回は start_url: /index.html にしているので問題なし）

✅ 4 これでの役割

追加したもの	役割
manifest	アプリとしての定義
theme-color	起動時の色
icon	ホーム画面アイコン
serviceWorker	インストール条件クリア

🔁 更新後（1回だけ）

```plain text 設定 → アプリ → Chrome → ストレージ → ストレージを消去

Chromeで開く：

👉 https://canape2020.stars.ne.jp/index.html?v=9

右上︙ 👉 ホーム画面に追加 → インストール ```

#🎉 これで indexページ自体がアプリ本体になります。