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

Question

有没有办法在使用Workbox时查找请求是XHR还是获取。

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

我已经进行了检查，以便上述路由仅用于XHR调用。虽然浏览器的网络Tab显示某个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。