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' });
的第二个选项,那么它对于图像和页面都可以正常工作。
我无法弄清楚该错误的原因是什么,以及为什么文件和页面的行为方式不同。
我的另一个疑问是,我真的需要这里的凭证参数,我添加它,因为我在网上看到的大多数实现都使用过它,但我观察到的是请求对象已经有了凭证属性,现在并不总是
包括
有时它是
同源
太。 因此,我实际上可以通过添加它来覆盖实际的凭证值。如果不是这样,那么包含它与否就没有区别。这没关系。
但如果是其他方式,那么我们不应该覆盖可能有不良副作用的凭据值。
答案 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使用。