How to listen for the "controlling" event in the main window

[ZYinMD]

trafficstars

I found some example code from the official doc here about listening for the "controlling" event in the main window, it's something like this:

import { Workbox } from 'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-window.prod.mjs';
const wb = new Workbox('/sw.js');
wb.addEventListener('controlling', () => {
   //...
});

How can I listen for this event in a vite-plugin-pwa app? I'm using injectManifest. Thanks!

[userquin]

We dont expose the workbox object, so you cannot register the listener, check the register.ts module on src/client/build folder

[userquin]

Why do you need add that event listener?

[ZYinMD]

I was looking for a way to know when sw is ready to intercept web requests. I tried navigator.serviceWorker.ready but it's not right. I created a question on stackoverlow. Maybe you could give some advices? Either in here or over there. Thanks!

[viniciusknob]

@ZYinMD I was looking for the same answer and I saw the question on stackoverflow already answered and accepted. I tested the solution and really worked.

navigator.serviceWorker.addEventListener('controllerchange', (...) => {...});

More info: https://web.dev/learn/pwa/update/#force-override

I think this issue could be closed.

[ZYinMD]

Close because the question has been answered both in the stackoverflow post in https://github.com/vite-pwa/vite-plugin-pwa/issues/296#issuecomment-1144228063 and also in viniciusknob's reply.