服务工作者额外打电话

我正在尝试与服务工作者一起进行缓存并遇到经过身份验证的调用问题.我目前使用https://css-tricks.com/serviceworker-for-offline/(https://raw.githubusercontent.com/chriscoyier/Simple-Offline-Site/master/js/service-worker.js)虽然我使用Google的sw-toolbox看到了相同的行为,但作为模板.

在发出依赖于特定标头参数进行身份验证的请求时,似乎浏览器发出的初始请求失败,然后成功请求(请参阅图像).有没有想过为什么会这样？任何其他可能有用的细节？

提前谢谢,丹

"Service Worker Fallback Required"消息是一条内部错误消息,应该已经消失了Chrome 46. 编辑:看起来它可能不会被修复,但这可能导致所描述的问题.我们正在跟进这个错误.

更一般的响应是,当您处理对经过身份验证的请求的响应时,您需要非常小心处理服务工作者缓存的方式.以下通用示例代码可能会回来咬你,我建议你在继续之前回答以下问题:

您是否确实希望缓存来自经过身份验证的请求的响应？

如果是这样,您是否希望对所有经过身份验证的请求/响应使用相同的缓存方法,或者只针对特定的API端点使用其中一些？请记住,可能有API调用仅对"新鲜"响应数据有意义.

一旦当前用户注销/切换到其他登录帐户,您有什么机制来处理过期的缓存响应？(如果您继续使用以前缓存的响应进行响应,则可能会向用户表示他们仍然以第一个帐户登录.)

如果您对一种方法感兴趣,可以阅读与Google I/O 2015网络应用相关的案例研究的相关部分,该部分采用的方法对我们处理的数据类型有意义.还有一些使用(以前称为)的附加代码也是相关的.但所有这些问题的答案取决于您的具体用例,因此请在实施之前仔细考虑.sw-toolboxshed

编辑:根据对此答案的评论,目的是完全避免服务工作者与经过身份验证的请求进行交互.如果是这种情况(这肯定简化了其他问题的答案),那么你应该能够做一些简单的事情,如:

self.addEventListener('fetch', event => {
  // Only call event.respondWith() if the request doesn't include an
  // Authorization header. You can swap in your own header name.
  if (!event.request.headers.has('Authorization')) {
    event.respondWith(
      // Your standard fetch(), caches.match(), etc. logic goes here.
    );
  }
});

这种方法利用了这样一个事实:如果服务工作者的fetch事件处理程序没有调用event.respondWith(),网络请求将最终继续进行,好像根本没有任何服务工作者参与.