Question

    event.respondWith(caches.match(event.request).then(function (response) {
        if (response) {
            return response;
        }          
         //return fetch(event.reuqest, { credentials: 'include' });

        //event.respondWith(fetch(event.request, { credentials: 'include' }));
    }));

这是通过服务工作者处理请求的常用代码，如果url在缓存中，则返回缓存响应或从服务器获取它。但我怀疑的是关于2个注释行，我们需要使用其中一个来获取响应。

我的疑问是，当我使用event.respondWith(fetch(event.request, { credentials: 'include'获取页面时，我收到以下错误

DOMException：无法在'FetchEvent'上执行'respondWith'：fetch事件已被响应。

但页面终于呈现了，绝对是浏览器最终获取响应，但是当我使用sam获取图像时，我得到相同的错误，并且最重要的是没有获取图像。

如果我使用return fetch(event.reuqest, { credentials: 'include' });的第二个选项，那么它对于图像和页面都可以正常工作。

我无法弄清楚该错误的原因是什么，以及为什么文件和页面的行为方式不同。

我的另一个疑问是，我真的需要这里的凭证参数，我添加它，因为我在网上看到的大多数实现都使用过它，但我观察到的是请求对象已经有了凭证属性，现在并不总是

包括

有时它是

同源

太。因此，我实际上可以通过添加它来覆盖实际的凭证值。如果不是这样，那么包含它与否就没有区别。这没关系。

但如果是其他方式，那么我们不应该覆盖可能有不良副作用的凭据值。

Answer 1

您已拨打event.respondWith，但无需再拨打两次电话。

您的第一个电话将使用由以下方式返回的承诺：

caches.match(event.request).then(function(response) {
  if (response) {
    return response;
  }

  return fetch(event.reuqest, { credentials: 'include' });
})

这个承诺解决了：

response，如果请求在缓存中;
致电fetch时返回的承诺，否则。

fetch返回的承诺将解析为响应，然后由responWith使用。

在serviceworker

1 个答案: