javascript - 通过 FCM 同时收到两条相同的消息作为推送通知
问题描述
我正在使用 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();
});
},
};
解决方案
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);
});
我已经按照那里写的那样实现了,它工作得很好:)
推荐阅读
- javascript - 如何在图表中使用变量(图表以 json 格式获取值)
- css - 如何使用角度材料显示搜索输入的进度?
- reactjs - 为什么在 header.js 的反应项目中出现意外的令牌错误?
- c# - 通过解决方案中的项目访问 DbContext
- java - .equals 方法和 Java 字符串池
- laravel - 将 StreamBuilder 与 Laravel Echo 一起使用
- python - 如何在 Python 的抽象类实现中使用 self?
- javascript - 在 Promise.race 中查找已履行承诺的索引
- r - 在R中按用户ID编号日期
- node.js - 如何获得营业额最多的前 10 名客户?