Question

有没有一种方法可以在使用Workbox时查找请求是XHR还是提取。

const matchCb = ({url, event}) => {
    if(event.type === 'xhr')
    {
    return true;
    }
    return false;
};
workbox.routing.registerRoute(
    matchCb,
    workbox.strategies.networkOnly()
);

我进行了检查，以便上述路由仅用于XHR呼叫。尽管浏览器的“网络”选项卡显示某些请求是xhr类型的请求，但它在调试上述代码时会被取出。难道我做错了什么？还有其他检查方法吗？

Answer 1

无法从Workbox内部或服务工作者内部确定。（我也不知道你为什么要这么做？）

可以做的一件事是，在发出请求时添加一个额外的请求标头，然后在服务工作者内部检查该标头。如果对区分通过XHR和va fetch()发出的请求确实很重要，则可以使用标头。

在您的网络应用程序内部：

const request = new Request('/api', {headers: {'X-Source': 'fetch'}});
const response = await fetch(request);

使用Workbox在服务工作者内部：

workbox.routing.registerRoute(
  // This matchCallback will only be true if the request
  // has an X-Source header set to 'fetch':
  ({event}) => event.request.headers.get('X-Source') === 'fetch',
  workbox.strategies.networkOnly()
);

请注意，如果要发出cors请求，则可能需要先删除该X-Source请求标头，然后再将其发送到网络，因为额外的请求标头可能会触发CORS preflight checks。

工作箱：查找请求是XHR还是提取

1 个答案: