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

src/views/base/home/components/AppHeader.vue

@@ -10,6 +10,15 @@
       </div>
 
       <div class="flex items-center gap-2">
+        <button
+          v-if="showInstallEntry"
+          type="button"
+          class="mhome-header-btn mhome-header-btn--install"
+          :aria-label="canNativeInstall ? 'نصب وب اپلیکیشن' : 'آموزش نصب'"
+          @click.stop="onInstall"
+        >
+          <Icon icon="vuesax-linear:mobile" size="18" />
+        </button>
         <button
           v-if="notificationEnabled"
           type="button"
@@ -52,9 +61,16 @@ import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { getProjectMobileNavLogo } from '@/utils/config'
 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'
 
 const headerRef = ref<HTMLElement | null>(null)
 const isHeaderScrolled = ref(false)
+const canNativeInstall = ref(false)
 const route = useRoute()
 
 const projectLogo = computed(() => getProjectMobileNavLogo())
@@ -63,6 +79,16 @@ const {
   unreadCount,
   clearUnreadLocally,
 } = useAppNotificationBadge()
+const { tryInstallOrOpenGuide, showInstallEntry } = usePwaInstall()
+
+function refreshCanInstall() {
+  canNativeInstall.value = hasNativeInstallPrompt()
+}
+
+async function onInstall() {
+  await tryInstallOrOpenGuide()
+  refreshCanInstall()
+}
 
 async function goNotifications() {
   clearUnreadLocally()
@@ -172,6 +198,10 @@ function setupScrollTracking() {
 }
 
 onMounted(async () => {
+  initPwaInstallPromptListener()
+  refreshCanInstall()
+  window.addEventListener(PWA_MANIFEST_READY_EVENT, refreshCanInstall)
+  window.addEventListener('appinstalled', refreshCanInstall)
   setupScrollTracking()
   await nextTick()
   setupScrollTracking()
@@ -195,6 +225,8 @@ watch(
 
 onUnmounted(() => {
   teardownScrollTracking()
+  window.removeEventListener(PWA_MANIFEST_READY_EVENT, refreshCanInstall)
+  window.removeEventListener('appinstalled', refreshCanInstall)
 })
 
 defineEmits<{