diff --git a/src/components/menu/SideMenu.tsx b/src/components/menu/SideMenu.tsx index bfaa756..aef9e6b 100644 --- a/src/components/menu/SideMenu.tsx +++ b/src/components/menu/SideMenu.tsx @@ -57,6 +57,17 @@ type BeforeInstallPromptEvent = Event & { userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>; }; +const isIOS = () => { + if (typeof window === 'undefined') return false; + return /iPad|iPhone|iPod/.test(navigator.userAgent) || + (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); +}; + +const isStandalone = () => { + if (typeof window === 'undefined') return false; + return ('standalone' in window.navigator) && (window.navigator as { standalone?: boolean }).standalone === true; +}; + function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) { const menuStateMemo = useMemo(() => menuState, [menuState]); const closeRef = useRef(null); @@ -65,6 +76,8 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS const { state: shareModal, toggle: toggleShareModal } = useToggle(); const { state: installPwaModal, toggle: toggleInstallPwaModal } = useToggle(); const [deferredPrompt, setDeferredPrompt] = useState(null); + const [isIOSDevice, setIsIOSDevice] = useState(false); + const [isPWAInstalled, setIsPWAInstalled] = useState(false); const params = useParams(); const { name } = params; @@ -85,16 +98,23 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS }; useEffect(() => { - const handleBeforeInstallPrompt = (e: Event) => { - e.preventDefault(); - setDeferredPrompt(e as BeforeInstallPromptEvent); - }; + const ios = isIOS(); + const standalone = isStandalone(); + setIsIOSDevice(ios); + setIsPWAInstalled(standalone); - window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt); + if (!ios) { + const handleBeforeInstallPrompt = (e: Event) => { + e.preventDefault(); + setDeferredPrompt(e as BeforeInstallPromptEvent); + }; - return () => { - window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt); - }; + window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt); + + return () => { + window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt); + }; + } }, []); const handleInstallPWA = async () => { @@ -131,6 +151,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS .filter(item => { if (item.auth && !userIsAuthenticated) return false; if (item.guestOnly && userIsAuthenticated) return false; + if (item.href === '?installpwa' && isPWAInstalled) return false; return true; }) .map(({ icon: Icon, ...item }, index) => { @@ -293,13 +314,52 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS {tInstallPwaModal('Heading')} -

- {tInstallPwaModal('Description')} -

- - + {isPWAInstalled ? ( +

+ {tInstallPwaModal('AlreadyInstalled')} +

+ ) : isIOSDevice ? ( +
+

+ {tInstallPwaModal('IOSDescription')} +

+
    +
  1. + + ۱ + + {tInstallPwaModal('IOSStep1')} +
  2. +
  3. + + ۲ + + {tInstallPwaModal('IOSStep2')} +
  4. +
  5. + + ۳ + + {tInstallPwaModal('IOSStep3')} +
  6. +
+
+ ) : ( + <> +

+ {tInstallPwaModal('Description')} +

+ {deferredPrompt ? ( + + ) : ( +

+ {tInstallPwaModal('ChromeFallback')} +

+ )} + + )} diff --git a/src/locales/fa/common.json b/src/locales/fa/common.json index 6578a2f..fe21ce0 100644 --- a/src/locales/fa/common.json +++ b/src/locales/fa/common.json @@ -50,8 +50,14 @@ }, "InstallPwaModal": { "Heading": "نصب اپلیکیشن", - "Description": "برای نصب کلیک کنید.", - "ButtonOk": "نصب کن" + "Description": "برای نصب اپلیکیشن روی دستگاه خود، از دکمه زیر استفاده کنید.", + "ButtonOk": "نصب کن", + "AlreadyInstalled": "اپلیکیشن قبلاً روی دستگاه شما نصب شده است.", + "IOSDescription": "برای نصب اپلیکیشن در Safari مراحل زیر را انجام دهید:", + "IOSStep1": "از نوار پایین، روی دکمه اشتراک‌گذاری (Share) بزنید.", + "IOSStep2": "در منوی باز شده، گزینه «Add to Home Screen» را انتخاب کنید.", + "IOSStep3": "در صفحه بعدی روی دکمه «Add» در گوشه بالا بزنید.", + "ChromeFallback": "اگر دکمه نصب را نمی‌بینید، یا اپلیکیشن قبلاً نصب شده است یا مرورگر هنوز امکان نصب را فعال نکرده است. کمی بعد دوباره تلاش کنید یا از منوی مرورگر گزینه نصب در صفحه اصلی را انتخاب کنید." }, "SearchPlaceholder": "جستجو" } \ No newline at end of file