firebase云消息传递:未调用setBackgroundMessageHandler

Question

我正在使用FCM对浏览器推送通知进行原型设计.我刚刚从快速入门(https://github.com/firebase/quickstart-js/tree/master/messaging)复制了示例代码.邮件已收到并按原样显示.但是当我尝试修改Service Worker(messaging.setBackgroundMessageHandler)中的消息时,没有任何反应.调用服务工作者,如果我在该服务工作者中为推送通知实现事件侦听器,它将捕获该事件.但是从不调用方法setBackgroundMessageHandler.我在Chrome 54上尝试这个.

我需要做些什么才能在服务工作者中自定义消息？

非常感谢你!

Answer 1

对于遇到同样问题的人,可以回答:https://github.com/firebase/quickstart-js/issues/71

简短摘要:请勿在json消息中包含"notification"元素.

Answer 2

这是一个在 webapp 中对我有用的解决方案。它显示带有标题和正文以及图像的通知，并处理用户点击。

firebase-messaging-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');

// Initialize Firebase
var config = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DB_URL',
  projectId: 'YOUR_PROJ_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_SENDER_ID',
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
  console.log('Handling background message ', payload);

  return self.registration.showNotification(payload.data.title, {
    body: payload.data.body,
    icon: payload.data.icon,
    tag: payload.data.tag,
    data: payload.data.link,
  });
});

self.addEventListener('notificationclick', function (event) {
  event.notification.close();
  event.waitUntil(self.clients.openWindow(event.notification.data));
});

JSON 消息

{
  "message": {
    "token": "YOUR_TARGET_APP_TOKEN",
    "data": {
      "title": "FCM Message",
      "body": "This is an FCM Message",
      "icon": "https://shortcut-test2.s3.amazonaws.com/uploads/role_image/attachment/10461/thumb_image.jpg",
      "link": "https://yourapp.com/somewhere"
    }
  }
}

Answer 3

当您尝试发送推送消息时，您是否在应用程序处于焦点状态时执行此操作？因为从文档来看，它说 setBackgroundMessageHandler 仅在Web 应用程序关闭或不在浏览器焦点中时调用。

基于快速入门 ( https://github.com/firebase/quickstart-js/tree/master/messaging ) 中的示例代码。

如果您的应用程序获得焦点：通过index.html 上的messaging.onMessage() 接收推送消息
如果您的应用程序没有焦点：通过服务工作线程文件上的setBackgroundMessageHandler() 接收推送消息。