在serviceworker

时间:2016-02-24 15:52:06

标签: service-worker fetch-api

    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' });的第二个选项,那么它对于图像和页面都可以正常工作。

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

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

  

包括

有时它是

  

同源

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

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

1 个答案:

答案 0 :(得分:2)

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

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

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

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

这个承诺解决了:

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

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