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

Posted 2023-02-22

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

【英文标题】：FCM (Firebase Cloud Messaging) : Firebase push notifications are displayed in Firefox but not in Chrome

【发布时间】：2021-05-07 08:50:49

【问题描述】：

我在我的 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);

【参考方案1】：

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

接收通知：

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

原答案：link

【讨论】：

OP 指的是浏览器（Firefox、Chrome），而您的答案与 android 原生应用有关，对吗？

不，我的回答只针对 Chrome 和 Firefox 浏览器相关