服务工作者通知点击不起作用

Question

I have to show notification on desktop and mobile browsers. I tried to create functionality which is following.

<script>

function registerServiceWorker() {
    return navigator.serviceWorker.register('sw.js?v=12')
    .then(function(registration) {
      console.log('Service worker successfully registered.');
      return registration;
    })
    .catch(function(err) {
      console.error('Unable to register service worker.', err);
    });
  }
function displayNotification()
{
//alert(Notification.permission);
        if(window.Notification && Notification.permission !== "denied") {
        Notification.requestPermission(function(permission) { 

        navigator.serviceWorker.ready.then(function(reg)
        {
        console.log(reg);
var options = {
    body: 'You have 1 new notification in Funafuti community.',
icon: '/images/icon.png',
vibrate: [100,50,100],
"badge": "/img/favicon-32x32.png",
data: { primaryKey:1 } ,
tag: "notificationid",
actions: [
        {
          action: 'check-action',
          title: 'Check',
          icon: '/images/popuparrow.png'
        },
        {
          action: 'cancel-action',
          title: 'Ignore',
          icon: '/images/popuparrow.png'
        }
        ]
   };
            var n=reg.showNotification('Notification',options);

        });
        });
        }

}

 displayNotification();
 registerServiceWorker();
</script>

/ ---------------------------------------------------------------------- / sw.js code:

<script>
self.addEventListener('notificationclick', function(event) {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'check-action':
     window.focus();
        event.notification.close();
      console.log('User  coffee.');
      break;
    case 'cancel-action':
     event.notification.close();
      console.log('User  doughnuts.');
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
});
</script>

Notification is working fine in both mobile browser and desktop but after click on notification action nothing happen.

I am using addEventListener on notificationclick, but it's still not working.

Answer 1

I was having the same problem. Can you check if you have focus assist on in your machine. I had it on and it wasn't working. I switched it off and now it's working.