ServiceWorkerContainer.ready解析为事件的 ServiceWorkerRegistration,但如果有多个服务 worker 在运行(例如,来自先前页面加载的服务 worker ,同一页面中的多个注册),则可以解析为多个服务 worker 。当执行一段代码时,如何确保特定的服务 worker 正在处理网络事件?
也就是说,我如何编写一个函数 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
});
最佳答案
首先,请注意每个作用域只能有一个事件的 service worker,并且您的客户端页面最多只能由一个 service worker 控制。因此,当 ready 解决时,您可以确定 控制您的页面 的服务人员处于事件状态。
要知道任意 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/