我正在使用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();
});
},
};
发布于 2020-05-31 06:05:46
在FCM中,有明确的步骤将哪些代码添加到服务工作者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);
});
我在那里实现了编写的代码,它工作得很好:)
https://stackoverflow.com/questions/62036245
复制