ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: duplicated notification

Browse Source
This commit is contained in:
zerosoul
2022-04-08 20:19:39 +08:00
parent 8aed9c9ff4
commit 8a8678eef2
7 changed files with 113 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/firebase-messaging-sw.js
+6 -39
View File
@@ -2,8 +2,12 @@
// See `Access registration token section` @ https://firebase.google.com/docs/cloud-messaging/js/client#retrieve-the-current-registration-token
// Scripts for firebase and firebase messaging
importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js");
importScripts(
"https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js"
);
importScripts(
"https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js"
);
// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
@@ -34,22 +38,6 @@ messaging.onBackgroundMessage((payload) => {
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();
// const title = data.Title;
// data.Data.actions = data.Actions;
// const options = {
// body: data.Message,
// data: data.Data,
// };
// event.waitUntil(self.registration.showNotification(title, options));
// });
self.addEventListener("notificationclick", function (event) {
console.log("notification click", event, event.notification);
@@ -86,27 +74,6 @@ self.addEventListener("notificationclick", function (event) {
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!");
})()
);
});
src/app/config.js
+11 -1
View File
@@ -1,6 +1,6 @@
// const BASE_URL = `${location.origin}/api`;
const BASE_URL = `https://dev.rustchat.com/api`;
export const CACHE_VERSION = `0.3.1`;
export const CACHE_VERSION = `0.3.2`;
// const BASE_URL = `https://rustchat.net/api`;
export const ContentTypes = {
text: "text/plain",
@@ -11,6 +11,16 @@ export const ContentTypes = {
formData: "multipart/form-data",
json: "application/json",
};
export const firebaseConfig = {
apiKey: "AIzaSyDyJ6B1Ouenoha_gdGkBwIkBNStlwhlbO0",
authDomain: "rustchat-develop.firebaseapp.com",
projectId: "rustchat-develop",
storageBucket: "rustchat-develop.appspot.com",
messagingSenderId: "418687074928",
appId: "1:418687074928:web:753286adbf239f5af9eab5",
measurementId: "G-XV476KEC8P",
};
export const vapidKey = `BGXCn-5YRXSFw38Q9lUKJ5bibL212-yIQn1pCvthGhp6_KwA29FO1Ax_d_7if1vfC2a5wTSVO8AcZrc-Hm1aS0Y`;
export const googleClientID =
"418687074928-naojba82n9ktf0rkvnqoor4nhr54ql1b.apps.googleusercontent.com";
// "840319286941-6ds7lbvk55eq8mjortf68cb2ll65lprt.apps.googleusercontent.com";
src/common/component/FirebaseNotification.js
-51
View File
@@ -1,51 +0,0 @@
import { useEffect } from "react";
import { getMessaging, getToken } from "firebase/messaging";
// // Import the functions you need from the SDKs you need
// import { initializeApp } from "firebase/app";
// import { getAnalytics } from "firebase/analytics";
// // TODO: Add SDKs for Firebase products that you want to use
// // https://firebase.google.com/docs/web/setup#available-libraries
// // Your web app's Firebase configuration
// // For Firebase JS SDK v7.20.0 and later, measurementId is optional
// const firebaseConfig = {
// apiKey: "AIzaSyDyJ6B1Ouenoha_gdGkBwIkBNStlwhlbO0",
// authDomain: "rustchat-develop.firebaseapp.com",
// projectId: "rustchat-develop",
// storageBucket: "rustchat-develop.appspot.com",
// messagingSenderId: "418687074928",
// appId: "1:418687074928:web:7ad57a83f756285cf9eab5",
// measurementId: "G-61T6TLQ27T"
// };
// // Initialize Firebase
// const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
export default function Notification() {
useEffect(() => {
// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: "<YOUR_PUBLIC_VAPID_KEY_HERE>" })
.then((currentToken) => {
if (currentToken) {
// Send the token to your server and update the UI if necessary
// ...
} else {
// Show permission request UI
console.log(
"No registration token available. Request permission to generate one."
);
// ...
}
})
.catch((err) => {
console.log("An error occurred while retrieving token. ", err);
// ...
});
}, []);
return <div>Notification</div>;
}
src/common/component/Notification/firebase.js
-54
View File
@@ -1,54 +0,0 @@
// Firebase Cloud Messaging Configuration File.
// Read more at https://firebase.google.com/docs/cloud-messaging/js/client && https://firebase.google.com/docs/cloud-messaging/js/receive
import { useState } from "react";
import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from "firebase/messaging";
const firebaseConfig = {
apiKey: "AIzaSyDyJ6B1Ouenoha_gdGkBwIkBNStlwhlbO0",
authDomain: "rustchat-develop.firebaseapp.com",
projectId: "rustchat-develop",
storageBucket: "rustchat-develop.appspot.com",
messagingSenderId: "418687074928",
appId: "1:418687074928:web:753286adbf239f5af9eab5",
measurementId: "G-XV476KEC8P",
};
initializeApp(firebaseConfig);
const messaging = getMessaging();
export const useDeviceToken = (vapidKey) => {
const [token, setToken] = useState(null);
getToken(messaging, {
vapidKey,
})
.then((currentToken) => {
if (currentToken) {
console.log("current token for client: ", currentToken);
setToken(currentToken);
// updateDeviceToken(currentToken)
// Perform any other neccessary action with the token
} else {
// Show permission request UI
console.log(
"No registration token available. Request permission to generate one."
);
}
})
.catch((err) => {
console.log("An error occurred while retrieving token. ", err);
});
return token;
};
// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker `messaging.onBackgroundMessage` handler.
export const onMessageListener = () =>
new Promise((resolve) => {
onMessage(messaging, (payload) => {
console.log("notification payload", payload);
resolve(payload);
});
});
src/common/component/Notification/index.js
+5 -26
View File
@@ -1,25 +1,14 @@
import { useState, useEffect } from "react";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
// import toast, { Toaster } from 'react-hot-toast';
import { useDeviceToken, onMessageListener } from "./firebase";
import useDeviceToken from "./useDeviceToken";
import { vapidKey } from "../../../app/config";
import { useUpdateDeviceTokenMutation } from "../../../app/services/auth";
const Notification = () => {
const navigateTo = useNavigate();
const token = useDeviceToken(
`BGXCn-5YRXSFw38Q9lUKJ5bibL212-yIQn1pCvthGhp6_KwA29FO1Ax_d_7if1vfC2a5wTSVO8AcZrc-Hm1aS0Y`
);
const token = useDeviceToken(vapidKey);
const [updateDeviceToken] = useUpdateDeviceTokenMutation();
const [notification, setNotification] = useState({ title: "", body: "" });
// const notify = () => toast(<ToastDisplay/>);
// function ToastDisplay() {
// return (
// <div>
// <p><b>{notification?.title}</b></p>
// <p>{notification?.body}</p>
// </div>
// );
// };
useEffect(() => {
if (token) {
updateDeviceToken(token);
@@ -41,17 +30,7 @@ const Notification = () => {
handleServiceworkerMessage
);
};
}, [notification]);
onMessageListener()
.then((payload) => {
console.log("foreground notification", payload);
setNotification({
title: payload?.notification?.title,
body: payload?.notification?.body,
});
})
.catch((err) => console.log("failed: ", err));
}, []);
return null;
};
src/common/component/Notification/useDeviceToken.js
+30
View File
@@ -0,0 +1,30 @@
import { useState } from "react";
import { initializeApp } from "firebase/app";
import { getToken, getMessaging } from "firebase/messaging";
import { firebaseConfig } from "../../../app/config";
const messaging = getMessaging(initializeApp(firebaseConfig));
const useDeviceToken = (vapidKey) => {
const [token, setToken] = useState(null);
getToken(messaging, {
vapidKey,
})
.then((currentToken) => {
if (currentToken) {
console.log("current token for client: ", currentToken);
setToken(currentToken);
// updateDeviceToken(currentToken)
// Perform any other neccessary action with the token
} else {
// Show permission request UI
console.log(
"No registration token available. Request permission to generate one."
);
}
})
.catch((err) => {
console.log("An error occurred while retrieving token. ", err);
});
return token;
};
export default useDeviceToken;
src/service-worker.tmp.js
+61
View File
@@ -0,0 +1,61 @@
// This a service worker file for receiving push notifitications.
// See `Access registration token section` @ https://firebase.google.com/docs/cloud-messaging/js/client#retrieve-the-current-registration-token
import { firebaseConfig } from "./app/config";
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";
// Initialize the Firebase app in the service worker by passing the generated config
// Retrieve firebase messaging
const messaging = getMessaging(initializeApp(firebaseConfig));
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).
// 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);
});
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) {
firstClient.postMessage({ newPath: redirectPath });
firstClient.focus();
}
})()
);
});
// self.addEventListener("notificationclose", function (event) {});