Javascript 如何在react应用程序中捕获firebase通知?
如何在react应用程序而不是浏览器中接收通知 目前,我收到以下通知:Javascript 如何在react应用程序中捕获firebase通知?,javascript,reactjs,firebase,firebase-cloud-messaging,Javascript,Reactjs,Firebase,Firebase Cloud Messaging,如何在react应用程序而不是浏览器中接收通知 目前,我收到以下通知: firebase-messaging-sw.js firebase-messaging-sw.js的代码: importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js'); va
firebase-messaging-sw.js
firebase-messaging-sw.js的代码:
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');
var config = {
apiKey: "myapikey",
authDomain: "thank-you-posta.firebaseapp.com",
databaseURL: "https://thank-you-posta.firebaseio.com",
projectId: "thank-you-posta",
storageBucket: "thank-you-posta.appspot.com",
messagingSenderId: "403125505139"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
self.addEventListener('notificationclick', function(event) {
console.log('[Service Worker] Notification click Received.');
event.notification.close();
event.waitUntil(
clients.openWindow('http://localhost:7000/#/messages/')
);
});
布局中的代码:
var config = {
apiKey: "myapikey",
authDomain: "thank-you-posta.firebaseapp.com",
databaseURL: "https://thank-you-posta.firebaseio.com",
projectId: "thank-you-posta",
storageBucket: "thank-you-posta.appspot.com",
messagingSenderId: "403125505139"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.requestPermission()
.then(function() {
console.log('Notification permission granted.');
messaging.getToken()
.then(function(currentToken) {
if (currentToken) {
console.log(currentToken);
_this.setState({
pushToken: currentToken
});
} else {
// Show permission request.
console.log('No Instance ID token available. Request permission to generate one.');
// Show permission UI.
}
})
.catch(function(err) {
console.log('An error occurred while retrieving token. ', err);
});
})
.catch(function(err) {
console.log('Unable to get permission to notify.', err);
});
messaging.onMessage(function(payload) {
console.log("Message received. ", payload);
// ...
});
我的问题是,我想接收通知,以便在布局中下拉所有通知。
Thx All.如果要在应用程序中显示这些通知,则必须在应用程序中创建通知组件。最简单的方法就是使用烤面包机之类的东西 基本上,在根组件中添加一个toaster片段,然后向toaster发送通知。从您的代码中不清楚您将发送给服务人员的通知存储在何处,但无论它们位于何处,都只是将它们重定向到toast。如果要从firebase控制台创建新消息,请在指定
.onMessage
messaging.onMessage(function(payload) {
console.log("Message received. ", payload);
// the container bit below is from the toast demo in the link above
container.success(payload, {
closeButton: true,
})
});
烤面包机基本上只是屏幕顶部的一个div,过一会儿就会消失。您可以构建自己的解决方案。烤面包机和其他类似的项目就是为了这个目的而被广泛使用的
如果您想要一个包含所有通知的自定义下拉组件,那么您必须构建它,并将其设置为与任何其他组件一样的样式。组件就位后,将消息保存到上面的
.onMessage
代码段中的firebase/firestore数据库中,然后在新通知组件中检索消息。否。您不了解我的问题。我需要捕获firebase通知。不是在sw.js中,而是在应用程序中(在我的脚本中)是的,我回答这个问题时说,您在sw.js中捕获它,将它保存到数据库中,然后从您必须构建的通知组件中的数据库中检索它。在firebase数据库中创建一个名为notifications的新集合,并在其中保存通知。如果您的通知存储在数据库中(而不是从通知控制台生成),则可以跳过sw.js部分。