如何在 Service Worker event.respondWith 之前调用异步函数？

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 来获取服务工作者，如果不匹配则什么都不做。

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 处理程序的 top-level 执行中同步完成。

这允许您同步检查请求 URL 和 headers 等操作，但它会阻止您对 IndexedDB 等操作执行异步查找。

如果你不能将你的标准转换为使用同步的东西，那么你最好的选择是无条件地调用 event.respondWith()，并且当标准不满足时，使用 return fetch(event.request) 尽可能接近如果您根本不响应时会得到的“默认”行为。（这基本上就是您在第二个示例中所做的。）

如何在 Service Worker event.respondWith 之前调用异步函数？

How to call asynchronous function before event.respondWith in Service Worker?

service-worker