Fix push notifications on iOS

Author: Isti01

frontend/src/common-components/EnableNotifications.tsx

@@ -1,9 +1,11 @@
 import { Alert, AlertDescription, AlertIcon, Box, Button, HStack, useDisclosure, VStack } from '@chakra-ui/react'
 import { useConfigContext } from '../api/contexts/config/ConfigContext.tsx'
+import { areNotificationsSupported } from '../util/configs/firebase.config.ts'
 
 export const EnableNotifications = () => {
   const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true })
   const config = useConfigContext()
+  if (!areNotificationsSupported()) return
   if (Notification.permission !== 'default') return null // we cannot ask again
 
   const component = config.components.pushnotification

frontend/src/common-components/PushNotificationHandler.tsx

@@ -1,5 +1,5 @@
 import { FC, PropsWithChildren, useEffect } from 'react'
-import { disableNotifications, getCloudMessaging, initNotifications } from '../util/configs/firebase.config.ts'
+import { areNotificationsSupported, disableNotifications, getCloudMessaging, initNotifications } from '../util/configs/firebase.config.ts'
 import { useConfigContext } from '../api/contexts/config/ConfigContext.tsx'
 import { Alert, AlertDescription, AlertTitle, Box, Button, CloseButton, useToast } from '@chakra-ui/react'
 import { useAuthContext } from '../api/contexts/auth/useAuthContext.ts'
@@ -12,9 +12,10 @@ export const PushNotificationHandler: FC<PropsWithChildren> = ({ children }) =>
   const toast = useToast()
 
   useEffect(() => {
+    if (!areNotificationsSupported()) return
     if (!authContext.isLoggedIn) return
     const shouldShowNotifications = config.components.pushnotification?.notificationsEnabled
-    const permissionGranted = Notification?.permission === 'granted'
+    const permissionGranted = Notification.permission === 'granted'
     if (shouldShowNotifications && permissionGranted) {
       const messaging = getCloudMessaging()
       if (messaging === null) return

frontend/src/common-components/footer/Footer.tsx

@@ -16,7 +16,7 @@ export const Footer = () => {
   const sponsors = useMemo(() => parseSponsors(component?.sponsorLogoUrls, component?.sponsorAlts, component?.sponsorWebsiteUrls), [config])
   const partners = useMemo(() => parseSponsors(component?.partnerLogoUrls, component?.partnerAlts, component?.partnerWebsiteUrls), [config])
   if (!component) return null
-  console.log(component)
+
   const partnersVisible = component?.bmeEnabled || component?.vikEnabled || component?.schonherzEnabled || component?.schdesignEnabled
   const topBarVisible = (component?.sponsorsEnabled || partnersVisible) && !component.minimalisticFooter
   const transparentNavbar = useColorModeValue(config.components.style.lightFooterTransparent, config.components.style.darkFooterTransparent)

frontend/src/util/configs/firebase.config.ts

@@ -29,6 +29,10 @@ export function getCloudMessaging(): Messaging | null {
   }
 }
 
+export function areNotificationsSupported() {
+  return 'Notification' in window && 'serviceWorker' in navigator && 'PushManager' in window
+}
+
 export async function initNotifications(messaging: Messaging, onNotification: (payload: MessagePayload) => void): Promise<void> {
   onMessage(messaging, onNotification)
   const token = await getMessagingToken(messaging)
@@ -40,6 +44,7 @@ export async function initNotifications(messaging: Messaging, onNotification: (p
 export const disableNotifications = () => unregisterServiceWorker()
 
 export async function unsubscribeFromNotifications() {
+  if (!areNotificationsSupported()) return
   if (Notification.permission !== 'granted') return // We cannot obtain a messaging token if the permission is not granted
 
   try {