如何在Service Worker的event.respondWith执行前调用异步函数

第一段代码无法生效的核心原因是：Service Worker的fetch事件要求event.respondWith()必须在事件回调的同步执行阶段调用。你的代码先await了异步的localforage.getItem操作，等拿到返回结果再调用event.respondWith()时，fetch事件的生命周期已经结束，浏览器会直接执行默认的网络请求逻辑，拦截操作自然不会生效。

你第二段代码的框架符合规范，只需要补充URL不匹配时的原生请求回退逻辑即可，既可以满足仅拦截指定URL的需求，也不会产生多余的性能负担：

self.addEventListener('fetch', (event) => {
    // 同步调用respondWith，传入异步处理的Promise
    event.respondWith(handleFetch(event));
});

const handleFetch = async (event) => {
    const url = await localforage.getItem('url');
    if(event.request.url === url){
        // 你的自定义拦截处理逻辑
        // ...
    }
    // 未匹配到目标URL时直接走原生请求逻辑
    return fetch(event.request);
}

该方案是Service Worker异步条件拦截场景的标准实现，localforage的读取和字符串匹配的开销极低，不会对正常请求性能产生影响。

内容的提问来源于stack exchange，提问作者Porthur