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

Question

我试图让用户知道应用程序在安装新的 Service Worker 后已更新。但问题是在执行了典型的 skipWaiting() 和 ClientsClaim() 并尝试向客户端发送有更新的消息后，clients 数组为空。

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);
    });
}

服务-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");
      });
    });
  }
});

service-worker.js中的clients数组为空，既然如此，我无法与用户通信。

（我也设置了这个 service worker 的通知，那里的 Clients 数组不为空，因此我与用户沟通没问题）

非常感谢任何帮助。

Answer 1

我能够重现问题。

本应执行此部分：

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

在收听 activate 事件时是这样的：

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

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

Can't notify users after updating service worker (workbox, cra)

javascript

reactjs

service-worker

progressive-web-apps

workbox