PMA Service Worker 通知点击不起作用

Question

I am trying to show a notification and do something when it is clicked. The part that shows is working well, is receiving data from the server, however, the function of clicking on the notification does not work, I have done everything the documentation says, what I found on the web and here, everything points with the same functionality that I have implemented but it doesn't seem to work. I have made fictitious practices and as long as the data is not loaded from the server, the click is triggered, otherwise, with the data it does not.

Can anyone tell me what I am doing wrong? I'll really apreciate some help, I've two days with this.

self.addEventListener('push', (e) => {
  let notification = e.data.json();
  const title = 'My app ' + notification.title;
  const options = {
      body: notification.msg,
      actions: [
        { action: 'yes', title: 'Aprobar' },
        { action: 'no', title: 'Rechazar' }
      ]
  };
  self.registration.showNotification(title, options);
}); //to show the notification with server info

self.addEventListener('notificationclick', function (event) {
   console.log(event);
   var noti = event.notification.data;
   let r = event.notification.data.json();
   console.log(noti); }, 
false); //handling the click

I've also tried with notificationclose to see if it catchs the click but it does not work either.

Important to note that it does not display any error or warning, it does simple do anything. Found the solution! See First Answer.

Answer 1

I found the solution! After playing around with the code and reading some others documents, it turns out that if my service on my server is a threading type, in my js has to be waiting for an answer. If someone needs it.

let notification = '';
self.addEventListener('push', (e) => {
 notification = e.data.json();
 const title = 'My app' + notification.title;
 const options = {
    body: notification.msg,
    actions: [
        { action: 'yes', title: 'Aprobar' },
        { action: 'no', title: 'Rechazar' }
    ]
};
 e.waitUntil(self.registration.showNotification(title, options)); }); //waitUntil to show the notification

self.addEventListener('notificationclick', function (event) {
console.log('[Service Worker] Notification click Received.');
event.notification.close();
let response = event.action;
event.waitUntil(
    fetch(`api/authorizations/processor?uuid=${notification.uuid}&response=${response}&account=${notification.user}`,
        {
            method: 'GET',
            mode: 'cors',
            cache: 'default'
        }).then((result) => {
            if (!result.ok)
                throw result;
            return result.json();
        }).then(function (data) {
            console.log(data);
        }).catch(function (error) {
            console.log(errow);
        })
); }); // waitUntil to expect a action