diff --git a/src/pages/App/handlers/NotificationsHandler/NotificationsHandler.tsx b/src/pages/App/handlers/NotificationsHandler/NotificationsHandler.tsx index de144355b..44f26f4f5 100644 --- a/src/pages/App/handlers/NotificationsHandler/NotificationsHandler.tsx +++ b/src/pages/App/handlers/NotificationsHandler/NotificationsHandler.tsx @@ -8,37 +8,60 @@ const NotificationsHandler: FC = () => { const userId = user?.uid; const [isRegistered, setIsRegistered] = useState(false); + function initServiceWorker() { + navigator.serviceWorker + .register("/firebase-messaging-sw.js") + .then((registration) => { + setIsRegistered(true); + return registration; + }) + .catch((err) => { + console.log("ServiceWorker registration failed: ", err); + }); + } + + // Check if the service worker is already registered or register a new one useEffect(() => { if ("serviceWorker" in navigator) { navigator.serviceWorker - .register("/firebase-messaging-sw.js") - .then((registration) => { - setIsRegistered(true); - return registration; + .getRegistration("/firebase-messaging-sw.js") + .then((existingRegistration) => { + if (existingRegistration) { + setIsRegistered(true); + } else { + initServiceWorker(); + } + + return; }) .catch((err) => { - console.log("ServiceWorker registration failed: ", err); + console.log("Error checking service worker registration: ", err); }); } }, []); + // Handle notification permissions and foreground message listener useEffect(() => { - if (!userId && !isRegistered) { + if (!userId || !isRegistered) { return; } let unsubscribeOnMessage; (async () => { const hasPermissions = await NotificationService.requestPermissions(); - if (hasPermissions) { - await NotificationService.saveFCMToken(); - - unsubscribeOnMessage = NotificationService.onForegroundMessage(); + if (!hasPermissions) { + console.log("Notification permissions denied"); + return; } + + await NotificationService.saveFCMToken(); + unsubscribeOnMessage = NotificationService.onForegroundMessage(); })(); return () => { - unsubscribeOnMessage && unsubscribeOnMessage(); + if (unsubscribeOnMessage) { + unsubscribeOnMessage(); + } }; }, [userId, isRegistered]); diff --git a/src/shared/components/Header/Header.tsx b/src/shared/components/Header/Header.tsx index 672bd3bff..8d10f043e 100755 --- a/src/shared/components/Header/Header.tsx +++ b/src/shared/components/Header/Header.tsx @@ -3,6 +3,7 @@ import { useDispatch, useSelector } from "react-redux"; import { Link, RouteProps, useHistory } from "react-router-dom"; import classNames from "classnames"; import { Routes } from "@/pages/MyAccount/components/Routes"; +import { NotificationService } from "@/services"; import { Loader } from "@/shared/components"; import { useAnyMandatoryRoles, @@ -82,7 +83,8 @@ const Header = () => { setShowAccountLinks(isMyAccountRoute); }, [showMenu, isMyAccountRoute]); - const handleLogIn = useCallback(() => { + const handleLogIn = useCallback(async () => { + await NotificationService.requestPermissions(); dispatch(setLoginModalState({ isShowing: true })); setShowMenu(false); }, [dispatch]); @@ -116,7 +118,8 @@ const Header = () => { dispatch(logOut()); }; - const handleLaunchApp = () => { + const handleLaunchApp = async () => { + await NotificationService.requestPermissions(); history.push(ROUTE_PATHS.INBOX); }; diff --git a/src/shared/utils/firebase.tsx b/src/shared/utils/firebase.tsx index 80147a0c8..675511068 100644 --- a/src/shared/utils/firebase.tsx +++ b/src/shared/utils/firebase.tsx @@ -30,6 +30,7 @@ function handlePersistenceError(err: any) { clearFirestoreCache(); } else { console.error("Error enabling persistence:", err); + reinitializeFirestoreWithPersistence(); } }