From 29bb85b6ba8844453babe1bc1ba865e9941c2b08 Mon Sep 17 00:00:00 2001
From: tsukumi <tsukumijima@users.noreply.github.com>
Date: Mon, 19 Aug 2024 07:45:39 +0900
Subject: [PATCH] =?UTF-8?q?Add:=20[Client]=20PWA=20=E3=81=A8=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=82=A4=E3=83=B3=E3=82=B9=E3=83=88=E3=83=BC=E3=83=AB?=
 =?UTF-8?q?=E5=8F=AF=E8=83=BD=E3=81=AA=E3=81=A8=E3=81=8D=E3=81=AB=20[?=
 =?UTF-8?q?=E3=82=A2=E3=83=97=E3=83=AA=E3=81=A8=E3=81=97=E3=81=A6=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=82=B9=E3=83=88=E3=83=BC=E3=83=AB]=20=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

NX-Jikkyo から移植
現状ヘッダーはロゴ以外に何も表示できてないので、それならばと
---
 client/package.json                 |  1 +
 client/src/components/HeaderBar.vue | 28 ++++++++++++++++++++++++++++
 client/yarn.lock                    |  5 +++++
 3 files changed, 34 insertions(+)

diff --git a/client/package.json b/client/package.json
index 7d7097f7..d66c915c 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 2d1c3b8b..4efb49de 100644
--- a/client/src/components/HeaderBar.vue
+++ b/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>
\ No newline at end of file
diff --git a/client/yarn.lock b/client/yarn.lock
index 96fae323..ae4579f5 100644
--- a/client/yarn.lock
+++ b/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"