refactor: update device and browser check logics

src/Modals.tsx

@@ -16,7 +16,7 @@ import {
   checkIfNotificationModalClosed,
   notificationsEnabledInBrowser
 } from '@/utils/notifications'
-import { isChrome, isIOS, isMobileButNotInstalledOnHomeScreen } from '@/utils/pwa'
+import { isAppleMobile, isMobileButNotInstalledOnHomeScreen, isSafari } from '@/utils/pwa'
 import { notificationPwaModalService, signatureModalService } from '@/utils/store'
 import { isMobile } from '@/utils/ui'
 
@@ -35,16 +35,16 @@ export const Modals = () => {
 
   const notificationModalClosed = checkIfNotificationModalClosed()
   const explicitlyDeniedOnDesktop = !isMobile() && window.Notification?.permission === 'denied'
-  const shouldShowChangeBrowserModal = isIOS() && isChrome()
-  const shouldShowPWAModal = isMobileButNotInstalledOnHomeScreen() && !shouldShowChangeBrowserModal
+  const shouldShowChangeBrowserModal = isAppleMobile ? !isSafari : false
+  const shouldShowPWAModal = isMobileButNotInstalledOnHomeScreen && !shouldShowChangeBrowserModal
   const shouldShowSignatureModal = isSignatureModalOpen && !shouldShowChangeBrowserModal
   const shouldShowUnsubscribeModalOpen = isUnsubscribeModalOpen && !shouldShowChangeBrowserModal
   const shouldShowPreferencesModalOpen = isPreferencesModalOpen && !shouldShowChangeBrowserModal
 
   const shouldShowNotificationModal =
     notificationsEnabledInBrowser() &&
     !explicitlyDeniedOnDesktop &&
-    !isMobileButNotInstalledOnHomeScreen() &&
+    !isMobileButNotInstalledOnHomeScreen &&
     !notificationsEnabled &&
     Boolean(notifyRegisteredKey) &&
     !isSignatureModalOpen &&

src/utils/pwa.ts

@@ -1,21 +1,18 @@
-import { detect } from 'detect-browser'
+export const isInstalledOnHomeScreen = window.matchMedia('(display-mode: standalone)').matches
 
-const browser = detect()
+export const isMobileBrowser = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 
-export const isInstalledOnHomescreen = () => {
-  // on Android and iOS, display mode is set to
-  // standalone when the app is opened from home screen
-  const displayIsStandalone = window.matchMedia('(display-mode: standalone)').matches
+export const isAppleMobile = /iPhone|iPad|iPod/i.test(navigator.userAgent)
 
-  return displayIsStandalone
-}
+/**
+ * vendor is deprecated but it's the only way to detect if the browser is belongs to Apple product (Safari)
+ * There are variety of browsers that are based on Chromium (Chrome, Arc, Brave, etc.) but `navigator` object doesn't provide a unique way to detect them.
+ * `userAgent` or other fields doesn't give us ability to check if it's Safari or not.
+ * So, we need to check the vendor to make sure that the browser is Safari to make conditional rendering.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vendor
+ */
+const isAppleVendor = /Apple Computer, Inc./i.test(navigator.vendor)
 
-export const isMobileBrowser = () => /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
+export const isSafari = isAppleVendor && navigator.userAgent.match(/Safari/i)
 
-export const isIOS = () => /iPhone|iPad|iPod/i.test(navigator.userAgent)
-
-export const isChrome = () =>
-  browser?.name ? /chrome|crios|edge-chromium/i.test(browser?.name) : false
-
-export const isMobileButNotInstalledOnHomeScreen = () =>
-  isMobileBrowser() && !isInstalledOnHomescreen()
+export const isMobileButNotInstalledOnHomeScreen = isMobileBrowser && !isInstalledOnHomeScreen