javascript - ServiceWorkerContainer.ready是否已准​​备好特定的scriptURL？

ServiceWorkerContainer.ready解析为一个有效的ServiceWorkerRegistration，但是如果有多个服务工作者在起作用（例如，来自上一页加载的服务工作者，同一页面中的多个注册），则可以解决多个服务工作者。当执行大量代码时，如何确保特定的服务工作者正在处理网络事件？

也就是说，我如何编写可以按如下方式使用的函数registerReady(scriptURL, options)：

registerReady("foo.js").then(function (r) {
    // "foo.js" is active and r.active === navigator.serviceWorker.controller
    fetch("/"); // uses foo.js's "fetch" handler
});

registerReady("bar.js").then(function (r) {
    // "bar.js" is active and r.active === navigator.serviceWorker.controller
    fetch("/"); // use bar.js's "fetch" handler
});

最佳答案

首先，请注意，每个作用域只能有一个活动的服务工作者，并且您的客户端页面最多只能由一个服务工作者控制。因此，准备就绪后，您可以肯定知道控制您的页面的服务人员处于活动状态。

要知道某个任意sw是否处于活动状态，您可以对其进行注册并检查注册中的服务人员队列，并监听其状态的变化。例如：

function registerReady(swScript, options) {
  return navigator.serviceWorker.register(swScript, options)
  .then(reg => {
    // If there is an active worker and nothing incoming, we are done.
    var incomingSw = reg.installing || reg.waiting;
    if (reg.active && !incomingSw) {
      return Promise.resolve();
    }

    // If not, wait for the newest service worker to become activated.
    return new Promise(fulfill => {
      incomingSw.onstatechange = evt => {
        if (evt.target.state === 'activated') {
          incomingSw.onstatechange = null;
          return fulfill();
        }
      };
    });
  })
}

希望这对您有意义。

关于javascript - ServiceWorkerContainer.ready是否已准​​备好特定的scriptURL？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35704511/