Service Worker 和 CSP 配置更改答案

【问题标题】：Service worker and CSP configuration changeService Worker 和 CSP 配置更改
【发布时间】：2019-06-10 19:51:59
【问题描述】：

在我们的项目中，我们配置了 CSP，并传入了 Response Headers。此外，我们还有简单的 Service Worker，它检查是否可以导航到另一个页面，以及是否可以重定向到缓存的离线 html 页面。这是部分 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 配置发生更改并且在 CSP 配置更改之前安装了 Service Worker 时，我们会得到 Refused to load the script '[url]' because it violates the following Content Security Policy directive: ... 错误。一旦我们更新或取消注册 Service Worker，就会应用新的 CSP 配置。

这是预期的行为吗？

【问题讨论】：

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

标签： service-worker content-security-policy

【解决方案1】：

如果你看一下MDN对skipWaiting()的描述，看来你需要service worker立即更新：

强制等待的 Service Worker 成为活跃的 Service Worker。

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

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

【讨论】：