Firebase Web 客户端错误 this.bgMessageHandler.next 不是函数答案

【问题标题】：Firebase web client error this.bgMessageHandler.next is not a functionFirebase Web 客户端错误 this.bgMessageHandler.next 不是函数
【发布时间】：2022-01-01 07:24:24
【问题描述】：

Firebase 客户端错误 this.bgMessageHandler.next 不是函数。所有步骤都按照：https://firebase.google.com/docs/cloud-messaging/js/receive

我已经使用以下设置设置了一个 firebase 应用：一个创建反应应用程序，以及下面提到的 service worker 文件。我的 serviceworker 文件的内容：

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

const firebaseApp = firebase.initializeApp({
    apiKey: "lsdafjlksdfjlaskdfjlkadfjaldkf",
    authDomain: "abcd.firebaseapp.com",
    projectId: "abcd",
    storageBucket: "abcd.appspot.com",
    messagingSenderId: "394504395830",
    appId: "asdljfdkjflasdf"
  });

const messaging = firebase.messaging(firebaseApp);
  
messaging.onBackgroundMessage(messaging, (payload) => {
    console.log('sw [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);
  });

我正在通过 Firebase 控制台的 Firebase 撰写通知 UI 从后端触发通知。

【问题讨论】：

标签： firebase push-notification firebase-cloud-messaging service-worker

【解决方案1】：

发生这种情况是因为我使用了来自：https://firebase.google.com/docs/cloud-messaging/js/receive 的混合指令

它有两个版本的代码：命名空间和模块化。始终使用其中任何一种。

我们的想法是始终使用单一类型，例如我的 serviceworker 脚本使用命名空间类型，从 importScripts 可以看出。所以在后台消息监听注册，正确的版本是使用单个参数，即回调。

messaging.onBackgroundMessage((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);
});

【讨论】：