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

Posted 2023-02-22

【中文标题】通过 FCM 同时收到两条相同的消息作为推送通知

【英文标题】：Two identical messages are received at the same time as push notifications through 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();
    );
  ,
;

【参考方案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);
);

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