Merge pull request #1632 from steinalex/ARTP-1228/ios-pwa-banner

fix(client): pwa display on ios (ARTP-1228)

src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWAInstallModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { MobileDevice, InstallButton } from './PWAInstallPrompt'
-import { Modal, AppleShareIcon } from 'rt-components'
+import { AppleShareIcon, Modal } from 'rt-components'
 import { styled } from 'rt-theme'
+import { InstallButton } from './PWAInstallPrompt'
 
 const MainTitle = styled.div`
   font-size: 1.19rem;
@@ -31,23 +31,17 @@ const Icon = styled.div`
 `
 
 interface InstallModalProps {
-  device: MobileDevice | null
   closeModal: () => void
 }
 
-export const PWAInstallModal: React.FC<InstallModalProps> = ({ device, closeModal }) => (
+export const PWAInstallModal: React.FC<InstallModalProps> = ({ closeModal }) => (
   <Modal shouldShow>
     <ModalWrapper>
       <MainTitle>Install Reactive Trader</MainTitle>
       <Text>This must be done manually</Text>
-      {device === MobileDevice.iOS ? (
-        <DeviceText>
-          Tap <Icon>{AppleShareIcon}</Icon> from the browsers bottom menu and select "Add to Home
-          Screen"
-        </DeviceText>
-      ) : (
-        <DeviceText>Go to your browser settings and select "Add to Home Screen"</DeviceText>
-      )}
+      <DeviceText>
+        Tap <Icon>{AppleShareIcon}</Icon> from the browsers menu and select "Add to Home Screen"
+      </DeviceText>
       <InstallButton onClick={closeModal}>Close</InstallButton>
     </ModalWrapper>
   </Modal>

src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWAInstallPrompt.tsx

@@ -3,6 +3,8 @@ import { CrossIcon } from 'rt-components'
 import { styled } from 'rt-theme'
 import { PWAInstallModal } from './PWAInstallModal'
 import { usePWABannerPrompt } from './usePWABannerPrompt'
+import Environment from 'rt-system/environment'
+import { isiOS, isMobileDevice } from 'apps/utils'
 
 const MainBanner = styled.div<{ isHidden: boolean }>`
   display: ${({ isHidden }) => (isHidden ? 'none' : 'flex')};
@@ -50,14 +52,9 @@ export enum PWABanner {
   Installed = 'installed',
 }
 
-export enum MobileDevice {
-  Android = 'android',
-  iOS = 'iOS',
-}
-
 interface InstallBannerProps {
   banner: string | null
-  updateBanner: (state: PWABanner, device?: MobileDevice) => void
+  updateBanner: (state: PWABanner) => void
   isModalOpen: boolean
   setIsModalOpen: Dispatch<SetStateAction<boolean>>
 }
@@ -68,16 +65,17 @@ export const PWAInstallBanner: React.FC<InstallBannerProps> = ({
   isModalOpen,
   setIsModalOpen,
 }) => {
-  const [prompt, promptToInstall, device] = usePWABannerPrompt()
-  const isHidden = banner !== PWABanner.Shown || (!prompt && device !== MobileDevice.iOS)
+  const [prompt, promptToInstall] = usePWABannerPrompt()
+
+  const isHidden = banner !== PWABanner.Shown || (!prompt && !isiOS) || Environment.isPWA()
 
   useEffect(() => {
     if (prompt && banner === PWABanner.NotSet) {
       updateBanner(PWABanner.Shown)
-    } else if (device && banner === PWABanner.NotSet) {
-      updateBanner(PWABanner.Shown, device)
+    } else if (isiOS && banner === PWABanner.NotSet) {
+      updateBanner(PWABanner.Shown)
     }
-  }, [prompt, banner, updateBanner, device])
+  }, [prompt, banner, updateBanner])
 
   useEffect(() => {
     const handler = () => {
@@ -93,27 +91,27 @@ export const PWAInstallBanner: React.FC<InstallBannerProps> = ({
     updateBanner(PWABanner.Hidden)
   }
 
-  const installPWA = (device: MobileDevice | null) => {
-    if (device === MobileDevice.iOS) {
+  const installPWA = (isiOS: boolean) => {
+    if (isiOS) {
       setIsModalOpen(true)
     } else {
       promptToInstall()
     }
   }
 
   if (isModalOpen) {
-    return <PWAInstallModal device={device} closeModal={() => setIsModalOpen(false)} />
+    return <PWAInstallModal closeModal={() => setIsModalOpen(false)} />
   }
 
   return (
     <MainBanner isHidden={isHidden}>
       <CrossButton onClick={closeBanner}>{CrossIcon}</CrossButton>
       <BannerText>
-        {device
+        {isMobileDevice
           ? 'Experience Reactive Trader as an app!'
           : 'Experience Reactive Trader on your desktop!'}
       </BannerText>
-      <InstallButton onClick={() => installPWA(device)}>Install</InstallButton>
+      <InstallButton onClick={() => installPWA(isiOS)}>Install</InstallButton>
     </MainBanner>
   )
 }

src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWALaunchButton.tsx

@@ -1,14 +1,15 @@
 import React, { Dispatch, SetStateAction } from 'react'
-import { PWABanner, InstallButton, MobileDevice } from './PWAInstallPrompt'
+import { PWABanner, InstallButton } from './PWAInstallPrompt'
 import { usePWABannerPrompt } from './usePWABannerPrompt'
+import { isiOS } from 'apps/utils'
 interface InstallLaunchProps {
   state: string | null
   setIsModalOpen: Dispatch<SetStateAction<boolean>>
 }
 export const PWALaunchButton: React.FC<InstallLaunchProps> = ({ state, setIsModalOpen }) => {
-  const [prompt, promptToInstall, device] = usePWABannerPrompt()
+  const [prompt, promptToInstall] = usePWABannerPrompt()
 
-  if (!prompt && device === MobileDevice.iOS && state === PWABanner.Hidden) {
+  if (!prompt && isiOS && state === PWABanner.Hidden) {
     return <InstallButton onClick={() => setIsModalOpen(true)}>Install</InstallButton>
   } else if (prompt && state === PWABanner.Hidden) {
     return <InstallButton onClick={promptToInstall}>Install PWA</InstallButton>

src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/usePWABannerPrompt.tsx

@@ -1,15 +1,11 @@
 import { useEffect, useState } from 'react'
 import { usePlatform } from 'rt-platforms'
-import { isAndroid, isiOS } from 'apps/utils'
-import { MobileDevice } from './PWAInstallPrompt'
 
 export const usePWABannerPrompt = (): [
   BeforeInstallPromptEvent | null,
-  () => Promise<void> | undefined,
-  MobileDevice | null
+  () => Promise<void> | undefined
 ] => {
   const [prompt, setPrompt] = useState<BeforeInstallPromptEvent | null>(null)
-  const [device, setDevice] = useState<MobileDevice | null>(null)
   const platform = usePlatform()
 
   const promptToInstall = () => {
@@ -24,9 +20,6 @@ export const usePWABannerPrompt = (): [
       platform.type === 'browser' ? setPrompt(e) : setPrompt(null)
     }
 
-    if (isAndroid) setDevice(MobileDevice.Android)
-    else if (isiOS) setDevice(MobileDevice.iOS)
-
     if (typeof window.beforeInstallPromptEvent === 'undefined') {
       window.addEventListener('beforeinstallprompt', ready)
     } else {
@@ -36,7 +29,7 @@ export const usePWABannerPrompt = (): [
     return () => {
       window.removeEventListener('beforeinstallprompt', ready)
     }
-  }, [platform.type, device])
+  }, [platform.type])
 
-  return [prompt, promptToInstall, device]
+  return [prompt, promptToInstall]
 }

src/client/src/rt-components/icons/index.ts

@@ -12,6 +12,5 @@ export { default as ChevronIcon } from './ChevronIcon'
 export { default as ChartIcon } from './ChartIcon'
 export { default as MailIcon } from './MailIcon'
 export { default as AppleShareIcon } from './AppleShareIcon'
-export { default as AndroidSettingsIcon } from './AndroidSettingsIcon'
 
 export { IconStateTypes } from './types'

src/client/src/rt-system/environment.ts

@@ -17,8 +17,9 @@ export default class Environment {
 
   static isPWA() {
     return (
-      window.matchMedia('(display-mode: standalone)').matches ||
-      (window.navigator as Navigator).standalone
+      (window.matchMedia('(display-mode: standalone)').matches ||
+        (window.navigator as Navigator).standalone) ??
+      false
     )
   }
 }