Question

如何在react应用程序中而不是在浏览器中接收通知？

我收到通知时：

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/')
  );
});

firebase-messaging-sw.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();

    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);
      // ...
    });

布局代码：

{{1}}

我的问题是我希望收到通知，以便在布局中显示所有通知的下拉列表。 Thx All。

Answer 1

如果您想在应用中显示这些通知，则必须在应用中创建通知组件。最简单的方法是使用像烤面包机https://github.com/tomchentw/react-toastr

这样的东西

基本上，您在根组件中添加了一个烤面包机片段，然后您将通知添加到烤面包机。从您的代码中不清楚您在哪里存储发送给服务工作者的通知，但无论他们只是将它们重定向到吐司。如果要从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,
        })
    });

烤面包机基本上只是屏幕顶部的一个div，一段时间后会消失。您可以构建自己的解决方案。烤面包机和其他类似项目通常用于此目的。

如果您想要一个包含所有通知的自定义下拉组件，那么您必须构建它并像任何其他组件一样设置样式。组件就位后，将消息保存到上面.onMessage代码段内的firebase / firestore数据库，然后检索新通知组件中的消息。

如何在应用程序中捕获firebase通知？

1 个答案: