fix notification crash on ios (#2192)

* fix notification crash for ios

* access notification from window variable

* fix Notification check

* catch notification variable error

* fix missing check for Notification

src/app/features/settings/notifications/Notifications.tsx

@@ -6,17 +6,14 @@ import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
-import { usePermissionState } from '../../../hooks/usePermission';
+import { getNotificationState, usePermissionState } from '../../../hooks/usePermission';
 import { AllMessagesNotifications } from './AllMessages';
 import { SpecialMessagesNotifications } from './SpecialMessages';
 import { KeywordMessagesNotifications } from './KeywordMessages';
 import { IgnoredUserList } from './IgnoredUserList';
 
 function SystemNotification() {
-  const notifPermission = usePermissionState(
-    'notifications',
-    window.Notification.permission === 'default' ? 'prompt' : window.Notification.permission
-  );
+  const notifPermission = usePermissionState('notifications', getNotificationState());
   const [showNotifications, setShowNotifications] = useSetting(settingsAtom, 'showNotifications');
   const [isNotificationSounds, setIsNotificationSounds] = useSetting(
     settingsAtom,
@@ -41,8 +38,9 @@ function SystemNotification() {
           description={
             notifPermission === 'denied' ? (
               <Text as="span" style={{ color: color.Critical.Main }} size="T200">
-                Notification permission is blocked. Please allow notification permission from
-                browser address bar.
+                {'Notification' in window
+                  ? 'Notification permission is blocked. Please allow notification permission from browser address bar.'
+                  : 'Notifications are not supported by the system.'}
               </Text>
             ) : (
               <span>Show desktop notifications when message arrive.</span>

src/app/hooks/usePermission.ts

@@ -1,4 +1,16 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
+
+export const getNotificationState = (): PermissionState => {
+  if ('Notification' in window) {
+    if (window.Notification.permission === 'default') {
+      return 'prompt';
+    }
+
+    return window.Notification.permission;
+  }
+
+  return 'denied';
+};
 
 export function usePermissionState(name: PermissionName, initialValue: PermissionState = 'prompt') {
   const [permissionState, setPermissionState] = useState<PermissionState>(initialValue);
@@ -15,16 +27,16 @@ export function usePermissionState(name: PermissionName, initialValue: Permissio
       .then((permStatus: PermissionStatus) => {
         permissionStatus = permStatus;
         handlePermissionChange.apply(permStatus);
-        permStatus.addEventListener("change", handlePermissionChange);
+        permStatus.addEventListener('change', handlePermissionChange);
       })
       .catch(() => {
         // Silence error since FF doesn't support microphone permission
       });
 
     return () => {
-      permissionStatus?.removeEventListener("change", handlePermissionChange);
+      permissionStatus?.removeEventListener('change', handlePermissionChange);
     };
   }, [name]);
 
   return permissionState;
-}
+}

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -8,7 +8,7 @@ import LogoUnreadSVG from '../../../../public/res/svg/cinny-unread.svg';
 import LogoHighlightSVG from '../../../../public/res/svg/cinny-highlight.svg';
 import NotificationSound from '../../../../public/sound/notification.ogg';
 import InviteSound from '../../../../public/sound/invite.ogg';
-import { setFavicon } from '../../utils/dom';
+import { notificationPermission, setFavicon } from '../../utils/dom';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { allInvitesAtom } from '../../state/room-list/inviteList';
@@ -110,7 +110,7 @@ function InviteNotifications() {
 
   useEffect(() => {
     if (invites.length > perviousInviteLen && mx.getSyncState() === 'SYNCING') {
-      if (showNotifications && Notification.permission === 'granted') {
+      if (showNotifications && notificationPermission('granted')) {
         notify(invites.length - perviousInviteLen);
       }
 
@@ -212,7 +212,7 @@ function MessageNotifications() {
         return;
       }
 
-      if (showNotifications && Notification.permission === 'granted') {
+      if (showNotifications && notificationPermission('granted')) {
         const avatarMxc =
           room.getAvatarFallbackMember()?.getMxcAvatarUrl() ?? room.getMxcAvatarUrl();
         notify({

src/app/utils/dom.ts

@@ -217,3 +217,10 @@ export const syntaxErrorPosition = (error: SyntaxError): number | undefined => {
   if (Number.isNaN(position)) return undefined;
   return position;
 };
+
+export const notificationPermission = (permission: NotificationPermission) => {
+  if ('Notification' in window) {
+    return window.Notification.permission === permission;
+  }
+  return false;
+};