Add: [Client] PWA としてインストール可能なときに [アプリとしてインストール] ボタンを表示する

NX-Jikkyo から移植
現状ヘッダーはロゴ以外に何も表示できてないので、それならばと

client/package.json

@@ -28,6 +28,7 @@
         "nanoid": "^5.0.7",
         "piexifjs": "^2.0.0-beta.9",
         "pinia": "^2.2.0",
+        "pwa-install-handler": "^2.6.0",
         "seamless-scroll-polyfill": "^2.3.4",
         "swiper": "^11.1.8",
         "tslib": "^2.6.3",

client/src/components/HeaderBar.vue

@@ -4,8 +4,27 @@
             <img class="konomitv-logo__image" src="/assets/images/logo.svg" height="21">
         </router-link>
         <v-spacer></v-spacer>
+        <v-btn v-if="isButtonDisplay" variant="flat" color="background-lighten-3" class="pwa-install-button"
+            @click="pwaInstallHandler.install()">
+            <Icon icon="material-symbols:install-desktop-rounded" height="20px" class="mr-1" />
+            アプリとしてインストール
+        </v-btn>
     </header>
 </template>
+<script lang="ts" setup>
+
+import { pwaInstallHandler } from 'pwa-install-handler';
+import { onMounted, ref } from 'vue';
+
+const isButtonDisplay = ref(false);
+
+onMounted(() => {
+    pwaInstallHandler.addListener((canInstall) => {
+        isButtonDisplay.value = canInstall;
+    });
+});
+
+</script>
 <style lang="scss" scoped>
 
 .header {
@@ -57,6 +76,15 @@
             }
         }
     }
+
+    .pwa-install-button {
+        @include smartphone-horizontal {
+            display: none !important;
+        }
+        @media (display-mode: standalone) {
+            display: none !important;
+        }
+    }
 }
 
 </style>

client/yarn.lock

@@ -4095,6 +4095,11 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
+pwa-install-handler@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/pwa-install-handler/-/pwa-install-handler-2.6.0.tgz#4cfa191f0ee8c7ba97bc43ed3d649847b59367fc"
+  integrity sha512-bJ7kv8fY6lNlrz2T96OZz+sUiAiwR5zZ1a1PqV0AeKaRcgoCcGuXhD8itZMAmStaa8w44MGtId/pDk6Qc5knnQ==
+
 qs@^6.5.2:
   version "6.12.3"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.12.3.tgz#e43ce03c8521b9c7fd7f1f13e514e5ca37727754"