Question

Firebase 消息传递 onMessage 仅在窗口中可用

2019-09-11

2421

javascript firebase vue.js vuejs2 firebase-cloud-messaging

我在项目中实现了 Firebase Cloud Messaging 来发送和接收推送通知。我可以接收推送通知，但无法使通知事件正常工作。具体来说，我想让 onMessage 事件正常工作，但由于某种原因，它给出了此错误：

Messaging: This method is available in a Window context. (messaging/only-available-in-window).

这是我用于消息传递的服务工作线程：

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js')

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  messagingSenderId: 'XXXXXXXX'
})

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging()
// messaging.setBackgroundMessageHandler(payload => {
//   console.log(payload)
// })
messaging.onMessage(function(payload) {
  // Messages received. Either because the
  // app is running in the foreground, or
  // because the notification was clicked.
  // `payload` will contain your data.
  console.log('Message received. ', payload)
})

我也尝试将该函数添加到我的 Vue 组件，但仍然收到相同的错误。我做错了什么？

Answer 1

不应在服务工作线程中注册 onMessage 回调。在服务工作线程中，您应使用（请参阅 Firebase 文档）：

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // ...
});

我可以确认，此功能目前对我有用。请注意，仅当您的应用处于后台并且您正在发送 数据消息 时，才会触发此功能。如果您正在发送通知，则 SDK 将自动处理消息的显示，并且不会触发您的 setBackgroundMessageHandler 回调。即使您发送的有效负载同时包含数据和通知内容，SDK 也会进行干预。

如果您想对服务工作线程之外的消息做出反应，请注意包含您网站的选项卡应位于前台。然后以下代码应该可以工作（与您拥有的代码相同）：

messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});

我的 Vue 组件中有上述代码片段（尽管我使用的是 Vue 3），我没有收到错误 ~~，但回调也没有被触发。也许你会有更好的运气~~ 。任何类型的消息都应触发此回调，无论是数据、通知还是两者。

另请注意链接文档顶部的表格，以了解何时触发哪个回调。

编辑：显然，当您通过 npm/Yarn 安装的 Firebase JS SDK 与您从服务工作线程导入的版本不同时，不会触发 onMessage 回调。例如，我从 npm 安装的是版本 7.2.3，而服务工作线程导入的是 6.3.4。将服务工作线程更新为 7.2.3 后，当应用位于前台时会触发 onMessage 回调。感谢 ErAz7 ！