From cad0bc887f898828f10e84c74ab58b41cdc0e3e0 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sun, 30 Jul 2023 14:03:58 +0800
Subject: [PATCH] feat: add install pwa button

---
 app.vue                   |  6 ++++--
 components/InstallPwa.vue | 10 ++++++++--
 pages/help.vue            |  3 +++
 utils/pwa.ts              |  6 ++++--
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app.vue b/app.vue
index 778c4c6..1c18baf 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// import { installPrompt } from './utils/pwa'
+import { installPrompt } from './utils/pwa'
 import { appName } from '~/constants'
 
 // https://github.com/vueuse/head
@@ -15,7 +15,9 @@ useHead({
   ],
 })
 
-// installPrompt()
+onMounted(() => {
+  installPrompt()
+})
 </script>
 
 <template>
diff --git a/components/InstallPwa.vue b/components/InstallPwa.vue
index 281b823..c434afd 100644
--- a/components/InstallPwa.vue
+++ b/components/InstallPwa.vue
@@ -20,8 +20,14 @@ function install() {
 <template>
   <Transition>
     <div v-if="app.deferredPrompt" text="center" m="t-2">
-      <button class="shadow" text="white" bg="green-500" p="x-4 y-0" m="2" @click="install">
-        安装
+      <button
+        class="shadow"
+        text="white" bg="green-500" p="x-4 y-2" m="2" inline-flex
+        items-center justify-center rounded-md font-bold
+        @click="install"
+      >
+        <div i-ri-install-line mr-1 inline-flex />
+        <span inline-flex>安装到桌面</span>
       </button>
     </div>
   </Transition>
diff --git a/pages/help.vue b/pages/help.vue
index 016dfcb..2601dbb 100644
--- a/pages/help.vue
+++ b/pages/help.vue
@@ -3,6 +3,9 @@
     <h1 text-2xl font="bold" my="4">
       帮助
     </h1>
+
+    <InstallPwa />
+
     <FeedbackActions />
 
     <div class="mx-auto max-w-md w-full rounded-2xl bg-white p-2" text-left>
diff --git a/utils/pwa.ts b/utils/pwa.ts
index d814225..58a7a70 100644
--- a/utils/pwa.ts
+++ b/utils/pwa.ts
@@ -1,7 +1,8 @@
 import { isClient } from '@vueuse/core'
 
 /**
- * https://web.dev/customize-install/#detect-install
+ * - https://web.dev/customize-install/#detect-install
+ * - [Trigger installation from your PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Trigger_install_prompt)
  * @returns
  */
 export function installPrompt() {
@@ -12,9 +13,10 @@ export function installPrompt() {
 
   window.addEventListener('beforeinstallprompt', (e) => {
     // Prevent the mini-infobar from appearing on mobile
-    // e.preventDefault()
+    e.preventDefault()
     // Stash the event so it can be triggered later.
     app.deferredPrompt = e
+
     // Update UI notify the user they can install the PWA
     // showInstallPromotion()
     // Optionally, send analytics event that PWA install promo was shown.