feat: add install pwa button

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>

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>

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>

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.