首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >通过FCM同时接收两条相同的消息作为推送通知

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

Stack Overflow用户
提问于 2020-05-27 13:46:24
回答 1查看 58关注 0票数 0

我正在使用Vue.js和FCM来实现WebPush通知。然而,当我测试它时,我收到一个来自Firebase的通知和两个相同的推送通知,这两个通知是由客户端接收的,而与浏览器或设备无关。

如有任何帮助,我们将不胜感激!

以下是JS的摘录。

代码语言:javascript
代码运行次数:0
运行
复制
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);

以下是令牌的摘录。

代码语言:javascript
代码运行次数:0
运行
复制
<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();
    });
  },
};
EN

回答 1

Stack Overflow用户

发布于 2020-05-31 14:05:46

在FCM中,有明确的步骤将哪些代码添加到服务工作者firebase-messaging-sw.js (https://firebase.google.com/docs/cloud-messaging/js/receive):

代码语言:javascript
代码运行次数:0
运行
复制
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);
});

我在那里实现了编写的代码,它工作得很好:)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62036245

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档