Browser push notifications not responding after some time - google-chrome

Question

I'm having a strange problem, and can't seem to find any solution for this. I subscribe users to my web push service and when they receive the notification I track when the notification displays, if its clicked or closed. But when i send notification with require interaction flag or persistent flags and leave it open around 1 min , it becomes disabled.
What I mean by disabled :
cant click on buttons
cant click on notification it self
only can click on X to close it
And then when the user closes notification or system closes it my service worker dose not register close event.
Also one of the problems i ran into on Firefox is that when users click on notification it only focuses on empty tab in Firefox.
Here is my service worker code :
self.addEventListener('push', function(event) {
console.log('[Service Worker] Push Received.');
data = event.data.json();
const title = data.title;
const options = data.options;
event.waitUntil(
self.registration.showNotification(title, options)
.then((notificationEvent)=>{
let payload = {
campaign_id: data.campaign_id,
subscriber_id:data.subscriber_id,
action:'display'
}
sendData(api_url+'touch',payload,'display');
})
);
});
self.addEventListener('notificationclick',function(event){
if(data.url){
console.log('Notification clicked !');
const clickedNotification = event.notification;
let promiseChain = null;
clickedNotification.close();
let payload = {
campaign_id: data.campaign_id,
subscriber_id:data.subscriber_id,
action:'click'
}
if(event.action === 'button1Link')
{
promiseChain = clients.openWindow(data.button1Link);
}else if(event.action === 'button2Link')
{
promiseChain = clients.openWindow(data.button2Link);
}else if(event.action === 'button3Link')
{
promiseChain = clients.openWindow(data.button3Link);
}else if(event.action === 'closeButton')
{
payload.action = 'close';
}else
{
promiseChain = clients.openWindow(data.url);
}
sendData(api_url+'touch',payload).then(()=>console.log('Stat
sent!'));
event.waitUntil(promiseChain);
}
})
self.addEventListener('notificationclose',function(event){
console.log('Notification closed !');
let payload = {
campaign_id: data.campaign_id,
subscriber_id:data.subscriber_id,
action:'close'
}
event.waitUntil(sendData(api_url+'touch',payload,'close'));
})
function sendData(url,payload)
{
let data = new FormData();
Object.keys(payload).map((field)=>{
data.append(field,payload[field]);
});
return fetch(api_url+'touch', {
method: 'POST',
body: data,
mode:'cors'
});
}
I could really use some advice and help, as I looked all over the web for reasons why is this happening and can't seem to find anything useful.
My payload structure looks like this :
array(7) {
["title"]=>
string(25) "Noise reducing headphones"
["url"]=>
string(76) "https://www.bestbuy.com/site/audio/headphones/abcat0204000.c?id=abcat0204000"
["campaign_id"]=>
string(2) "49"
["button1Link"]=>
string(120) "https://cdn.iconscout.com/public/images/icon/premium/png-512/headphones-phones-music-player-3b0242ebbd8df45e-512x512.png"
["button2Link"]=>
string(120) "https://cdn.iconscout.com/public/images/icon/premium/png-512/headphones-phones-music-player-3b0242ebbd8df45e-512x512.png"
["button3Link"]=>
string(120) "https://cdn.iconscout.com/public/images/icon/premium/png-512/headphones-phones-music-player-3b0242ebbd8df45e-512x512.png"
["options"]=>
array(7) {
["actions"]=>
array(3) {
[0]=>
array(2) {
["action"]=>
string(11) "button1Link"
["title"]=>
string(5) "Order"
}
[1]=>
array(2) {
["action"]=>
string(11) "button2Link"
["title"]=>
string(6) "Cancel"
}
[2]=>
array(2) {
["action"]=>
string(11) "button3Link"
["title"]=>
string(17) "Order on facebook"
}
}
["body"]=>
string(40) "Listen to your music without disturbance"
["image"]=>
string(56) "campaignimg1.jpg"
["icon"]=>
string(53) "image2.png"
["vibrate"]=>
array(1) {
[0]=>
string(0) ""
}
["silent"]=>
bool(false)
["requireInteraction"]=>
bool(false)
}
}

Answer 1

So I figured out what was going wrong with my service worker ...
First rebuilt my promises :
notificationclick listener now looks like this :
self.addEventListener('notificationclick',function(event){
const clickedNotification = event.notification;
if(clickedNotification.data.url){
let openWindowEvent = null;
clickedNotification.close();
let payload = {
campaign_id: clickedNotification.data.campaign_id,
subscriber_id:clickedNotification.data.subscriber_id,
action:'click'
}
if(event.action === 'button1Link')
{
openWindowEvent = clients.openWindow(clickedNotification.data.button1Link);
}else if(event.action === 'button2Link')
{
openWindowEvent = clients.openWindow(clickedNotification.data.button2Link);
}else if(event.action === 'button3Link')
{
openWindowEvent = clients.openWindow(clickedNotification.data.button3Link);
}else if(event.action === 'closeButton')
{
payload.action = 'close';
}else
{
openWindowEvent = clients.openWindow(clickedNotification.data.url);
}
payload = prepareData(payload);
const sendStat = fetch(api_url+'touch', {
method: 'POST',
body: payload,
mode:'cors'
});
const promiseChain = Promise.all([
openWindowEvent,
sendStat
]);
event.waitUntil(promiseChain);
}
})
Channing promises helped keep alive service worker long until all the tasks are done .
Also i rebuilt onclose event listener so now it looks like this :
self.addEventListener('notificationclose',function(event){
const closedNotification = event.notification;
console.log('Notification closed !');
let payload = {
campaign_id: closedNotification.data.campaign_id,
subscriber_id: closedNotification.data.subscriber_id,
action:'close'
}
payload = prepareData(payload);
const promiseChain = fetch(api_url+'touch', {
method: 'POST',
body: payload,
mode:'cors'
});
event.waitUntil(promiseChain);
})
And the main problem that disabled my notifications after some time was accessing data. I made a mistake trying to save data that I sent from server when the 'push' event triggered ... This was ok until browser decides to kill the service worker. Then you lose all the data stored in variables.
Solution:
Access data sent from server using variable 'event' passed in to all the event listeners :
self::addEventListener('notificationclick',function(event){});
From there you can access all the data sent with notification and use it as you want. This solved problem of not opening new tab with sent url and registering close event .