如何使用 firebase 云消息获取推送消息事件，如点击、关闭、显示

Question

正在尝试使用 FCM 实现网络推送通知。

我可以使用 firebase 云消息库在浏览器上接收带有负载的推送消息。

下面是 javascript 代码片段。

<script src="https://www.gstatic.com/firebasejs/3.5.1/firebase.js">  </script>
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.onMessage(function(payload){
    console.log('onMessage',payload);
});

如何捕获点击、关闭、显示等事件？

Answer 1

通知打开

您可以通过将以下内容添加到您的 firebase-messaging-sw.js 文件来监听数据负载的通知点击：

self.addEventListener('notificationclick', function(event) {
  event.notification.close();

  // Do something as the result of the notification click
});

通知关闭

您可以通过以下方式监听通知关闭事件：

self.addEventListener('notificationclose', function(event) {
  // Do something as the result of the notification close
});

注：event.waitUntil()

你应该知道，为了确保你的代码有时间完成运行，你需要将一个承诺传递给 event.waitUntil()，当你的代码完成时解析，例如：

self.addEventListener('notificationclick', function(event) {
  event.notification.close();

  const myPromise = new Promise(function(resolve, reject) {
    // Do you work here

    // Once finished, call resolve() or  reject().
    resolve();
  });

  event.waitUntil(myPromise);
});

如果通知是数据负载，您会知道何时显示通知，因为您需要在自己的代码中调用 self.registration.showNotification()，如下所示：

messaging.setBackgroundMessageHandler(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'
  };

  return self.registration.showNotification(notificationTitle,
      notificationOptions);
});

您无法检测何时为 "notification" 负载显示通知，因为 SDK 会同时处理显示通知和单击时的行为。

代码片段来自：

如何使用 firebase 云消息获取推送消息事件，如点击、关闭、显示

How to get push message events like click,close,show with firebase cloud messaging

javascript

web-push

firebase-cloud-messaging

通知打开

通知关闭

注：event.waitUntil()