FCM（Firebase 云消息传递）：Firebase 推送通知在 Firefox 中显示，但在 Chrome 中不显示

Question

我在我的 React 代码中集成了 Firebase。推送通知在 Firefox 中显示，onMessage() 和 onBackgroundMessage() 方法在 Firefox 中可以正常工作，但在 Chrome 中则不行。 我已经在我的 App.js（加载所有组件的主组件）中初始化了 firebase。 我已将 firebase-messaging-sw.js 包含在我的公共文件夹中。如果我需要从我的代码中添加/减去任何内容，请告诉我。

我已经在 localhost 和安全域上测试了这段代码。

这是我的 firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');

firebase.initializeApp({
    databaseURL: 'databaseURL.firebaseio.com',
    apiKey: "apiKey",
    authDomain: "authDomain.firebaseapp.com",
    projectId: "projectId",
    storageBucket: "storageBucket",
    messagingSenderId: "messagingSenderId",
    appId: "appId"
});

const initMessaging = firebase.messaging();

initMessaging.onBackgroundMessage(function(payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    const notificationTitle = 'Background Message Title';
    const notificationOptions = {
      body: 'Background Message body.',
      // icon: '/firebase-logo.png'
    };
  
    self.registration.showNotification(notificationTitle,
      notificationOptions);
  });

App.js 代码

import firebase from './firebase';

export class App extends Component {

  callFirebase = () => {
    try {
      const messaging = firebase.messaging();
      messaging.requestPermission().then(() => {
        return messaging.getToken({ vapidKey: "vapidKey" })
      })
        .then((token) => {
          console.log("Connected To FIREBASE")
          console.log("Token: ", token);
          this.props.firebaseToken(token);
        })
        .catch(e => {
          this.props.firebaseToken(null);
          console.log("Err from firebase", e)
        })

      messaging.onMessage(function (payload) {
        console.log("Message received. ", payload);
        // ...
      });
    }
    catch (e) {
      console.log("Error from firebase: ", e);
    }

  }

  componentDidMount() {
    this.callFirebase();
  }

render() {
    return (
     <Code/>
    );
  }
}


export default (App);

Answer 1

这可能是防火墙配置问题，您可以尝试使用不同的互联网，如果可以，则需要将此配置添加到防火墙。

接收通知：

您需要按照documentation打开5228、5229和5230。

原答案：link