更新 service worker (workbox, cra) 后无法通知用户

Question

I'm trying to let user know that the app is updated after installing the new service worker. But the problem is after doing the typical skipWaiting() and ClientsClaim() and trying to send message to clients that there is an update, clients array is empty.

index.js

serviceWorkerRegistration.Register();

serviceWorkerRegistration.js

function registerValidSW(swUrl, config) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker == null) {
          return;
        }
        installingWorker.onstatechange = () => {
          if (installingWorker.state === "installed") {
            if (navigator.serviceWorker.controller) {
              // here workbox sends message to service-worker.js
              registration.waiting.postMessage({ type: "SKIP_WAITING" });

              if (config && config.onUpdate) {
                config.onUpdate(registration);
              }
            } else {
              if (config && config.onSuccess) {
                config.onSuccess(registration);
              }
            }
          }
        };
      };
    })
    .catch(error => {
      console.error("Error during service worker registration:", error);
    });
}

service-worker.js

self.addEventListener("message", event => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    skipWaiting();
    clientsClaim();
    //clients array is empty here
    self.clients.matchAll().then(clients => {
       clients.forEach(client => {
        client.postMessage("reload-window");
      });
    });
  }
});

Clients array is empty in service-worker.js , That being the case, I can't communicate with user.

(I've also setup notifications with this service worker, Clients array is not empty there as a result I've no problem communicating with user)

Any help is greatly appreciated.

Answer 1

I was able to reproduce the problem.

Should've been doing this part:

self.clients.matchAll().then(clients => {
       clients.forEach(client => {
        client.postMessage("reload-window");
      });
    });

while listening to activate event like this:

self.addEventListener("activate", () => {
  self.clients.matchAll().then(clients => {
    clients.forEach(client => {
      client.postMessage("reload-window");
    });
  });
});