当网站为前台时如何显示通知

Question

我正在使用reactj。我在我的项目上实现了Firebase，并且运行良好。 当我的网站为前景（我可以在浏览器中看到它）时，它什么都不显示，但是当我将选项卡浏览器（我的网站现在为背景）更改为另一个网站时，也会显示新的通知。

sw.js：

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
firebase.initializeApp({
    apiKey: "AIzaSyAGMyGtfn3Wc-EilOk9Y5Hr8mRd******",
    authDomain: "****.firebaseapp.com",
    databaseURL: "https://****.firebaseio.com",
    projectId: "****",
    storageBucket: "****.appspot.com",
    messagingSenderId: "97247527****9"
});
const messaging = firebase.messaging();

// messaging.onMessage(function(payload) {
//     console.log("Message received. ", payload);
//     // ...

//   });

messaging.setBackgroundMessageHandler(function (payload) {
    console.log('firesddddd','sdfdf')
    const notificationTitle = payload.data.title;
    const notificationOptions = {
      body: payload.data.body,
      icon: payload.data.icon
    };
    return self.registration.showNotification(notificationTitle,
      notificationOptions);
  });

我的项目名称是parsebar。

背景（显示我的消息）： 前台（不显示我的消息）：