如何在 React 应用程序中捕获 Firebase 通知?
Posted
技术标签:
【中文标题】如何在 React 应用程序中捕获 Firebase 通知?【英文标题】:How capture firebase notification in react app? 【发布时间】:2018-06-03 05:28:19 【问题描述】:如何在 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');
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);
// ...
);
我的问题是我想接收通知以在 Layout 中创建包含所有通知的下拉列表。 谢谢大家。
【问题讨论】:
【参考方案1】:如果您想在您的应用中显示这些通知,那么您必须在您的应用中创建一个通知组件。最简单的方法是使用类似烤面包机的东西https://github.com/tomchentw/react-toastr
基本上,您在根组件中添加一个烤面包机 sn-p,然后向烤面包机提供通知。从您的代码中不清楚您将发送给服务人员的通知存储在哪里,但无论它们在哪里都只是将它们重定向到 toast。如果您从 firebase 控制台创建新消息,则在指定 .onMessage
时将它们重定向到 toast
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,
)
);
Toaster 基本上只是屏幕顶部的一个 div,它会在一段时间后消失。您可以构建自己的解决方案。烤面包机和其他类似的项目通常用于此目的。
如果您想要一个包含所有通知的自定义下拉组件,那么您必须像任何其他组件一样构建它并设置它的样式。组件到位后,将消息保存到上述 .onMessage
sn-p 内的 firebase/firestore 数据库,然后在新的通知组件中检索消息。
【讨论】:
没有。你不明白我的问题。我需要捕获 Firebase 通知。不在 sw.js 中,而是在应用程序中(在我的脚本中) 是的,我回答了这个问题,说您在 sw.js 中捕获它,将其保存到数据库中,然后从您必须构建的通知组件中的数据库中检索它。在您的 firebase 数据库中创建一个名为通知的新集合并将通知保存在那里。如果您的通知无论如何都存储在数据库中(而不是从通知控制台生成),那么您可以跳过 sw.js 部分。以上是关于如何在 React 应用程序中捕获 Firebase 通知?的主要内容,如果未能解决你的问题,请参考以下文章
在 react s-s-r 应用程序中调用 firebase 消息传递方法时,如何修复 self 未定义?
如何使用 CKEditor 和 React JS 捕获 OnChange 事件