Question

我想使用Service Workers来增强现有的网站。特别是，我想通过让Service Workers在实际资源不可用时使用占位符资源响应请求来添加更好的离线支持。这种方法一直在起作用，但我遇到了一个障碍。站点中有一些位置使用同步 XHR请求来加载某些资源，而我的服务工作者在Chrome中没有收到它们的事件。（请不要建议消除同步XHR请求。这是期望的，但超出范围。）

服务工作者是否应该可以响应同步XHR请求？我可以想象这个实现起来很复杂，并且会理解它是否不受支持。 A＆＃34;正确＆＃34;答案应该存在于W3C Service Workers Specification (Working Draft)和WHATWG Fetch Specification (Living Standard)之间，但我还没有完成解密。我希望解释规范如何描述是否应该支持这一点，和/或对有关指定或实现此行为的讨论的任何引用。

Answer 1

根据XMLHttpRequest spec，fetch procedure for both synchronous and asynchronous requests是same因此，从理论上讲，它应该被拦截，但Synchronous XHR has been deprecated所以我不希望Chrome解决此问题。< / p>

Answer 2

理论上

是的，服务人员应该能够响应XHR同步请求。规范中没有明确说明这一点，但是没有例外会导致对同步XHR请求的处理不同，并且W3C Web平台测试（WPT）套件具有一个测试用例来验证其是否受支持：wpt/service-workers/service-worker/fetch-request-xhr-sync.https.html

实践中

从2019年1月开始，服务人员可以在Firefox和Edge中响应同步XHR请求，但不能在Chrome或Safari中响应。 Chrome是planning to add support soon，但我们不知道Safari是否会使用。

at WPT.fyi提供了最新的浏览器支持列表。您可以在https://w3c-test.org/service-workers/service-worker/fetch-request-xhr-sync.https.html的浏览器中运行WPT测试用例。

Answer 3

您可以通过将异步调用链接在一起来创建同步效果。它创建缩进的回调 - 而promises会使代码更容易阅读 - 但是第二个Ajax调用直到第一个返回后才会进行。请注意，在两次调用中，第3个参数都设置为true。

// Synchronized Ajax calls using 2 nested Asynchronous calls

// Asynchronous request #1 using traditional API
const axhr = new XMLHttpRequest();
axhr.open('GET', '/__so-example__', true);
axhr.onload = event => {
  console.log("A-XHR: " + axhr.responseText);

  // Asynchronous request #2 using traditional API
  const sxhr = new XMLHttpRequest();
  sxhr.open('GET', '/__so-example__', true);
  sxhr.onload = event => {
    console.log("S-XHR: " + sxhr.responseText);
  }
  sxhr.send();
}
axhr.send();

这只是一个例子。我假设promises可以很容易地链接（但是垂直堆叠，而不是右缩进）以创建同步效果。

服务工作者可以响应同步XHR请求吗？

3 个答案:

理论上

实践中