I have been working on implementing WebPush notifications using Vue.js and FCM. However, when testing the functionality, I am facing an issue where instead of receiving just one notification from Firebase, TWO IDENTICAL PUSH NOTIFICATIONS are being received by the client, regardless of the browser or device.
Any assistance with resolving this problem would be greatly appreciated!
Here is a snippet of the JavaScript code:
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);
And here is a snippet related to the token:
<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();
});
},
};