服务工作者额外打电话

Question

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

当发出依赖特定标头参数进行身份验证的请求时，似乎浏览器发出的初始请求失败，然后成功请求（请参阅图像）。有没有想过为什么会这样？还有其他可能有用的细节吗？

提前致谢， 丹

Answer 1

＆＃34;服务工作人员需要回退＆＃34;消息是an internal error message本应与Chrome 46一起消失。编辑：看起来它可能无法修复，但这可能导致所述问题。我们正在跟进该错误。

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

• 你肯定想要缓存经过身份验证的请求的响应吗？
• 如果是这样，您是否希望对所有经过身份验证的请求/响应使用相同的缓存方法，或者只针对特定的API端点使用其中一些？请记住，可能有API调用仅适用于＃34; fresh＆＃34;响应数据。
• 当前用户注销/切换到其他已登录帐户时，您有什么机制来处理过期缓存响应？ （如果您继续使用之前缓存的响应进行响应，则可能会向用户表示他们仍然以第一个帐户登录。）

如果您对一种方法感兴趣，可以通读与relevant section of the case study相关的Google I/O 2015 web app，其中采用的方法对我们处理的数据类型有意义用。有些additional code使用sw-toolbox（以前称为shed）也是相关的。但所有这些问题的答案取决于您的具体用例，因此请在实施之前仔细考虑。

编辑：根据对此答案的评论，目的是完全避免服务工作者与经过身份验证的请求进行交互。如果是这样的话（这肯定会简化其他问题的答案），那么你应该可以做一些直截了当的事情，如：

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()，网络请求将最终继续进行，就好像没有＆＃ 39;任何服务工作者都参与其中。