From aea8023af7f089a66fb5bd54ac275891ec96061b Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Sun, 9 Apr 2023 10:27:53 +0800
Subject: [PATCH] fix: notification click router

---
 public/firebase-messaging-sw.js             |  3 ++-
 src/common/component/Notification/index.tsx | 30 ++++++++++-----------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
index 5824cac2..a18fe166 100644
--- a/public/firebase-messaging-sw.js
+++ b/public/firebase-messaging-sw.js
@@ -27,7 +27,8 @@ self.addEventListener("notificationclick", function (event) {
         return;
       }
       if (allClients.length == 0) {
-        chatClient = await clients.openWindow(redirectPath);
+        // hash路由
+        chatClient = await clients.openWindow(`/#${redirectPath}`);
       } else {
         firstClient.postMessage({ newPath: redirectPath });
         firstClient.focus();
diff --git a/src/common/component/Notification/index.tsx b/src/common/component/Notification/index.tsx
index 1e5ddbba..2f1cbe22 100644
--- a/src/common/component/Notification/index.tsx
+++ b/src/common/component/Notification/index.tsx
@@ -1,12 +1,12 @@
 import { useEffect, memo } from "react";
-// import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import useDeviceToken from "./useDeviceToken";
 import { vapidKey } from "../../../app/config";
 import { useUpdateDeviceTokenMutation } from "../../../app/services/auth";
 let updated = false;
 let updating = false;
 const Notification = () => {
-  // const navigateTo = useNavigate();
+  const navigateTo = useNavigate();
   const token = useDeviceToken(vapidKey);
   const [updateDeviceToken] = useUpdateDeviceTokenMutation();
   useEffect(() => {
@@ -24,19 +24,19 @@ const Notification = () => {
     updateToken(token as string);
   }, [token]);
 
-  // useEffect(() => {
-  //   const handleServiceWorkerMessage = (event: MessageEvent) => {
-  //     const { newPath } = event.data;
-  //     if (newPath && document.hidden) {
-  //       navigateTo(newPath);
-  //     }
-  //   };
-  //   // https only
-  //   navigator.serviceWorker?.addEventListener("message", handleServiceWorkerMessage);
-  //   return () => {
-  //     navigator.serviceWorker?.removeEventListener("message", handleServiceWorkerMessage);
-  //   };
-  // }, []);
+  useEffect(() => {
+    const handleServiceWorkerMessage = (event: MessageEvent) => {
+      const { newPath } = event.data;
+      if (newPath && document.hidden) {
+        navigateTo(newPath);
+      }
+    };
+    // https only
+    navigator.serviceWorker?.addEventListener("message", handleServiceWorkerMessage);
+    return () => {
+      navigator.serviceWorker?.removeEventListener("message", handleServiceWorkerMessage);
+    };
+  }, []);
 
   return null;
 };