Service worker and CSP configuration change

Question

On our project we have CSP configured and passed in Response Headers. Also we have simple Service Worker which checking if it's possible to navigate to another page and if not redirecting to cached offline html page. This is code of part of Service Worker for fetch event

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))
    );
});

But when CSP configuration is changed and Service Worker was installed before this changes in CSP configuration we get Refused to load the script '[url]' because it violates the following Content Security Policy directive: ... error. And as soon as we update or unregister Service Worker, new CSP configuration is applied.

Is it expected behaviour?

Answer 1

It seems that you need the service worker to update immediately, if you take a look at MDN's description of skip​Waiting():

forces the waiting service worker to become the active service worker.

Use this method with Clients.claim() to ensure that updates to the underlying service worker take effect immediately for both the current client and all other active clients.

Clients.claim() is to make sure that the service worker in potentially other opened tabs is updated as well.