Question

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

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

非常感谢！

Answer 1

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

简短摘要：请勿在json消息中包含“notification”元素。

Answer 2

正如其他人提到的那样，在有效负载中包含通知会使其停止在Web JS SDK上运行，但是您需要提供它才能使其在本机应用程序中运行。

我为网络找到的解决方法是使用网络浏览器本机EH push手动处理事件：

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/onpush

  self.addEventListener('notificationclick', function(event) {
    console.log('SW: Clicked notification', event)

    let data = event.notification.data

    event.notification.close()

    self.clients.openWindow(event.notification.data.link)
  })

  self.addEventListener('push', event => {
    let data = {}

    if (event.data) {
      data = event.data.json()
    }

    console.log('SW: Push received', data)

    if (data.notification && data.notification.title) {
      self.registration.showNotification(data.notification.title, {
        body: data.notification.body,
        icon: 'https://example.com/img/icons/icon-144x144.png',
        data
      })
    } else {
      console.log('SW: No notification payload, not showing notification')
    }
  })

Answer 3

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

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

如果您的应用是焦点：推送消息是通过index.html上的messaging.onMessage（）接收的如果您的应用没有焦点：推送消息是通过服务工作文件上的setBackgroundMessageHandler（）接收的。

Answer 4

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

<强>火力的消息-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"
    }
}

}

firebase云消息传递：未调用setBackgroundMessageHandler

4 个答案: