如何在事件发生前调用异步函数.respondWith in Service Worker?

Question

不行

self.addEventListener('fetch', async (event) => {
const url = await localforage.getItem('url'); // url change if page changed
if(event.request.url === url){
event.respondWith(handleFetch(event));
}
});
const handleFetch = async (event) => {
....
}

如果我移动url到event.responseWith。它的工作，但做每个请求，但我只需要匹配url在service worker中获取，如果不匹配，什么都不做。

self.addEventListener('fetch', async (event) => {
event.respondWith(handleFetch(event));
});
const handleFetch = async (event) => {
const url = await localforage.getItem('url'); // url change if page changed
if(event.request.url === url){
....
}
}

Answer 1

这是有意为之。关于是否调用event.respondWith()的决定需要在fetch处理程序的顶层执行中同步完成。

这允许您同步检查请求URL和标头之类的事情，但它不允许您对IndexedDB之类的事情执行异步查找。

如果您不能将您的标准转换为使用同步的东西，那么您最好的选择是无条件地调用event.respondWith()，当条件不满足时，使用return fetch(event.request)尽可能接近"默认值"。如果你不回应就会有这种行为。(这基本上就是你在第二个例子中所做的。)