Where to put eventlisteners for serviceworker

Basicly I'm trying to accomplish to show a dialog when a new serviceworker version has been detected, and then to have user decide to reload to fetch it. To accomplish this we need to actively set skipWaiting before we reload window.

Here's my action:

  onClickHandler = () => {
    console.log('on click', 'posting skipWaiting');
    navigator.serviceWorker.controller.postMessage('skipWaiting');
  };

Here's my attempt to create the eventListener:

navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker == null) {
          return;
        }
        installingWorker.onstatechange = () => {
          console.log('worker state', installingWorker.state);
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              console.log(
                'New content is available and will be used when all ' +
                  'tabs for this page are closed.'
              );

              navigator.serviceWorker.addEventListener('message', event => {
                console.log('skip waiting');
                if (event.data === 'skipWaiting') {
                  self.skipWaiting();
                }
              });
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });

The issue is that navigator.serviceWorker.addEventListener('message', event => does not get triggered. Am I declaring the listener wrong?

from Where to put eventlisteners for serviceworker