Merge pull request #2734 from daostack/CW-service-worker-performance

Service worker performance

Author: MeyerPV

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]);
 

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);
   };
 

src/shared/utils/firebase.tsx

@@ -30,6 +30,7 @@ function handlePersistenceError(err: any) {
     clearFirestoreCache();
   } else {
     console.error("Error enabling persistence:", err);
+    reinitializeFirestoreWithPersistence();
   }
 }