Browser notifications and service workers

What’s the best practice in terms of extending the service worker code in pwa.js? I want to capture the ‘on click’ event for the Notifications API when triggered via a service worker. This is all working fine for triggering the notification - but I am struggling to capture the on click event. Doing various searches online suggested I should add an event listener to the service worker - and so I have added a sw.js file to my project that has the following code:

self.onnotificationclick = function(event) {
  console.log('On notification click: ', event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(clients.matchAll({
    type: "window"
  }).then(function(clientList) {
    for (var i = 0; i < clientList.length; i++) {
      var client = clientList[i];
      if (client.url == '/' && 'focus' in client)
        return client.focus();
    }
    if (clients.openWindow)
      return clients.openWindow('/');
  }));
};

However, this doesn’t appear to be working - as no console log entry appears.

You can’t respond to UI events directly in service workers - they are operating on different threads. You need to have an event handler on the main UI thread send a notification to your service thread.