通过 FCM 同时收到两条相同的消息作为推送通知答案

【问题标题】：Two identical messages are received at the same time as push notifications through FCM通过 FCM 同时收到两条相同的消息作为推送通知
【发布时间】：2020-09-14 02:07:37
【问题描述】：

我正在使用 Vue.js 和 FCM 来实现 WebPush 通知。但是，当我测试它时，我会收到来自 Firebase 的一个通知和两个相同的推送通知，无论浏览器或设备如何，客户端都会收到这些通知。

任何帮助将不胜感激！

以下是JS的节选。

const messaging = firebase.messaging();

function showNotification(data) {
    console.log(data);
    var title = data.notification.title;
    var tag = 'push';

    return self.registration.showNotification(title, {
        icon: data.notification.icon,
        body: data.notification.body,
        data: data.data,
        vibrate: [400,100,400],
        tag: tag
    });
}

self.addEventListener('install', (event) => {
    event.waitUntil(self.skipWaiting());
});

function receivePush(event) {

    console.log("receivePush");
    console.log(event.data.json());
    if(event.data) {
        data = event.data.json();
    }
    if('showNotification' in self.registration) {
        event.waitUntil(showNotification(data));
    }
}

function notificationClick(event) {
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data.url)
    );
    addClickCount(event.notification.data.record_id);
}

function addClickCount (record_id) {
    var api_url = 'https://' + location.host + '/_app/api/auth/push';
    fetch(api_url, {
        method: 'POST',
        mode: 'cors',
        headers: {
          'Accept': 'application/json',
          'content-type': 'application/json',
        },
        body: JSON.stringify({id: record_id}),
    })
    .then(response => response.text())
    .then(text => console.log(text));
}

self.addEventListener('push', receivePush, false);
self.addEventListener('notificationclick', notificationClick, false);

以下是令牌的摘录。

<template>
        <div class="column-btn">
          <div class="col">
            <div class="btn btn-white">
              <a
                href="javascript:void(0);"
                class="btnItem push-yes"
                style="background:none"
                >Yes</a
              >
            </div>
          </div>
          <div class="col">
            <div class="btn btn-white">
              <a
                href="javascript:void(0);"
                class="btnItem push-no"
                style="background:none"
                >No</a
              >
            </div>
          </div>
</template>

export default {
  methods: {
  },
  mounted() {
    var pData = this.$parent;
    var thisData = this;
    $(document).on('click', '.push-yes', function() {
      pData.permission_off();
      thisData.modalClose();
    });
    $(document).on('click', '.push-no', function() {
      thisData.modalClose();
    });
  },
};

【问题讨论】：

标签： javascript firebase vue.js firebase-cloud-messaging

【解决方案1】：

FCM 中有明确的步骤，将哪些代码添加到 Service Worker firebase-messaging-sw.js (https://firebase.google.com/docs/cloud-messaging/js/receive)：

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);
});

我已经按照那里写的那样实现了，它工作得很好:)

【讨论】：