Add web app install button and step-by-step PWA guide.

src/views/base/home/desktop/components/DesktopHomeTopbar.vue

@@ -10,6 +10,16 @@
         <BasicIcon icon="vuesax-linear:user" size="16" />
         <span>حساب کاربری</span>
       </button>
+      <button
+        v-if="showInstallEntry"
+        type="button"
+        class="dhome-btn-ghost"
+        :aria-label="canNativeInstall ? 'نصب وب اپلیکیشن' : 'آموزش نصب'"
+        @click="onInstall"
+      >
+        <BasicIcon icon="vuesax-linear:mobile" size="16" />
+        <span>{{ canNativeInstall ? 'نصب وب اپ' : 'آموزش نصب' }}</span>
+      </button>
       <button
         v-if="notificationEnabled"
         type="button"
@@ -42,10 +52,17 @@
 </template>
 
 <script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { useUserStore } from '@/store/userStore'
 import { useAppNotificationBadge } from '@/composables/useAppNotificationBadge'
 import { canRequestBrowserNotification, requestBrowserNotificationPermission } from '@/utils/browserNotification'
+import { usePwaInstall } from '@/composables/usePwaInstall'
+import { PWA_MANIFEST_READY_EVENT } from '@/modules/pwa/manifest'
+import {
+  hasNativeInstallPrompt,
+  initPwaInstallPromptListener,
+} from '@/modules/pwa/pwaInstall'
 import router from '@/router'
 
 withDefaults(
@@ -60,11 +77,22 @@ defineEmits<{
 }>()
 
 const userStore = useUserStore()
+const canNativeInstall = ref(false)
 const {
   enabled: notificationEnabled,
   unreadCount,
   clearUnreadLocally,
 } = useAppNotificationBadge()
+const { tryInstallOrOpenGuide, showInstallEntry } = usePwaInstall()
+
+function refreshCanInstall() {
+  canNativeInstall.value = hasNativeInstallPrompt()
+}
+
+async function onInstall() {
+  await tryInstallOrOpenGuide()
+  refreshCanInstall()
+}
 
 async function goNotifications() {
   clearUnreadLocally()
@@ -77,6 +105,18 @@ async function goNotifications() {
 function reloadApp() {
   window.location.reload()
 }
+
+onMounted(() => {
+  initPwaInstallPromptListener()
+  refreshCanInstall()
+  window.addEventListener(PWA_MANIFEST_READY_EVENT, refreshCanInstall)
+  window.addEventListener('appinstalled', refreshCanInstall)
+})
+
+onUnmounted(() => {
+  window.removeEventListener(PWA_MANIFEST_READY_EVENT, refreshCanInstall)
+  window.removeEventListener('appinstalled', refreshCanInstall)
+})
 </script>
 
 <style scoped>