title: Where to put eventlisteners for serviceworker
body: <p>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 <code>skipWaiting</code> before we reload window. </p>
  
  <p>Here's my action:</p>
  
  <pre><code>  onClickHandler = () =&gt; {
      console.log('on click', 'posting skipWaiting');
      navigator.serviceWorker.controller.postMessage('skipWaiting');
    };
  </code></pre>
  
  <p>Here's my attempt to create the eventListener:</p>
  
  <pre><code>navigator.serviceWorker
      .register(swUrl)
      .then(registration =&gt; {
        registration.onupdatefound = () =&gt; {
          const installingWorker = registration.installing;
          if (installingWorker == null) {
            return;
          }
          installingWorker.onstatechange = () =&gt; {
            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 =&gt; {
                  console.log('skip waiting');
                  if (event.data === 'skipWaiting') {
                    self.skipWaiting();
                  }
                });
              }
            }
          };
        };
      })
      .catch(error =&gt; {
        console.error('Error during service worker registration:', error);
      });
  </code></pre>
  
  <p>The issue is that <code>navigator.serviceWorker.addEventListener('message', event =&gt;</code> does not get triggered. Am I declaring the listener wrong?</p>