服务工作者和CSP配置更改

Question

在我们的项目中，我们配置了CSP并在响应头中传递。此外，我们还有一个简单的Service Worker，它会检查是否可以导航到另一页，如果不行，则重定向到缓存的离线HTML页面。 这是fetch事件的Service Worker部分代码：

self.addEventListener('fetch', function (event) {
  event.respondWith(
    // Try to find requested resource in the cache
    caches
      .match(event.request).then(function (response) {
        // Fallback to network if it's not in cache
        return response || fetch(event.request);
      })
      .catch(getFallbackResponse(event))
    );
});

但是，当CSP配置发生变化且Service Worker在此更改之前已安装时，我们会收到"拒绝加载脚本 '[url]'，因为它违反了以下内容安全策略指令: ..."的错误提示。并且一旦更新或注销Service Worker，新的CSP配置就会应用。这是正常行为吗？

- yarm

---

你找到解决问题的方法了吗？我也遇到了同样的问题。 - Shubham

Answer 1

似乎您需要服务工作者立即更新，如果您查看MDN关于skip​Waiting()的描述：

强制等待中的服务工作者成为活动服务工作者。

使用此方法与Clients.claim()一起使用，以确保底层服务工作者的更新立即对当前客户端和所有其他活动客户端生效。

Clients.claim()是为了确保潜在其他打开的选项卡中的服务工作者也得到更新。

- Null