feat: clickable notification

public/firebase-messaging-sw.js

@@ -22,16 +22,22 @@ firebase.initializeApp(firebaseConfig);
 const messaging = firebase.messaging();
 console.log("wwwwwwwwww");
 // Handle incoming messages while the app is not in focus (i.e in the background, hidden behind other tabs, or completely closed).
-messaging.onBackgroundMessage(function (payload) {
+// data:{from_server_id}
+messaging.onBackgroundMessage((payload) => {
   console.log("Received background message ", payload);
 
   const notificationTitle = payload.notification.title;
   const notificationOptions = {
+    data: payload.data,
     body: payload.notification.body,
   };
 
   self.registration.showNotification(notificationTitle, notificationOptions);
 });
+// setTimeout(() => {
+//   console.log("notification test");
+//   self.registration.showNotification("hello", { body: "test" });
+// }, 5000);
 // 开始监听推送
 // self.addEventListener("push", function (event) {
 //   var data = event.data.json();
@@ -45,6 +51,64 @@ messaging.onBackgroundMessage(function (payload) {
 //   event.waitUntil(self.registration.showNotification(title, options));
 // });
 
-// self.addEventListener("notificationclick", function (event) {});
+self.addEventListener("notificationclick", function (event) {
+  console.log("notification click", event, event.notification);
+  event.waitUntil(
+    (async function () {
+      const allClients = await clients.matchAll({
+        includeUncontrolled: true,
+      });
+      const [firstClient] = allClients;
+      // 没有数据
+      if (!event.notification.data) {
+        firstClient.focus();
+        return;
+      }
+      const {
+        rustchat_from_uid,
+        rustchat_to_uid,
+        rustchat_to_gid,
+      } = event.notification.data;
+
+      let chatClient;
+      let redirectPath = rustchat_to_uid
+        ? `/chat/dm/${rustchat_from_uid}`
+        : rustchat_to_gid
+        ? `/chat/channel/${rustchat_to_gid}`
+        : "";
+      if (!redirectPath) {
+        firstClient.focus();
+        return;
+      }
+      if (allClients.length == 0) {
+        chatClient = await clients.openWindow(redirectPath);
+      } else {
+        firstClient.postMessage({ newPath: redirectPath });
+        firstClient.focus();
+      }
+
+      // // Let's see if we already have a chat window open:
+      // for (const client of allClients) {
+      //   const url = new URL(client.url);
+
+      //   if (url.pathname == '/chat/') {
+      //     // Excellent, let's use it!
+      //     client.focus();
+      //     chatClient = client;
+      //     break;
+      //   }
+      // }
+
+      // // If we didn't find an existing chat window,
+      // // open a new one:
+      // if (!chatClient) {
+      //   chatClient = await clients.openWindow('/chat/');
+      // }
+
+      // // Message the client:
+      // chatClient.postMessage("New chat messages!");
+    })()
+  );
+});
 
 // self.addEventListener("notificationclose", function (event) {});

src/common/component/Notification/index.js

@@ -1,10 +1,11 @@
 import { useState, useEffect } from "react";
-
+import { useNavigate } from "react-router-dom";
 // import toast, { Toaster } from 'react-hot-toast';
 import { useDeviceToken, onMessageListener } from "./firebase";
 import { useUpdateDeviceTokenMutation } from "../../../app/services/auth";
 
 const Notification = () => {
+  const navigateTo = useNavigate();
   const token = useDeviceToken(
     `BGXCn-5YRXSFw38Q9lUKJ5bibL212-yIQn1pCvthGhp6_KwA29FO1Ax_d_7if1vfC2a5wTSVO8AcZrc-Hm1aS0Y`
   );
@@ -26,9 +27,20 @@ const Notification = () => {
   }, [token]);
 
   useEffect(() => {
-    if (notification?.title) {
+    const handleServiceworkerMessage = (event) => {
-      console.log("notification", notification);
+      const { newPath } = event.data;
-    }
+      navigateTo(newPath);
+    };
+    navigator.serviceWorker.addEventListener(
+      "message",
+      handleServiceworkerMessage
+    );
+    return () => {
+      navigator.serviceWorker.removeEventListener(
+        "message",
+        handleServiceworkerMessage
+      );
+    };
   }, [notification]);
 
   onMessageListener()