What causes a Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode error?

问题

After upgrading to Chrome 64, I realized that this error appears when I load my page on a new tab.

I can't identify where it is on the service worker. Here is my code to run the fetch:

self.addEventListener('fetch', function(event) {
   if (event.request.url.startsWith(self.location.origin)) {
       event.respondWith(
           caches.match(event.request).then(function(response) {
              return response || fetch(event.request).then(function(fetch_resp){
                  return fetch_resp;
              });
           })
       );
   }
});

Could anyone here, who has more knowledge about service worker, help me to solve this error?

回答1:

I believe this is a Chromium bug that has been reported here. Hopefully it will be fixed soon or some more information about the issue will be published.

Paul Irish implemented a temporary work around, which is as follows:

if (e.request.cache === 'only-if-cached' && e.request.mode !== 'same-origin') {
  return;
}

I ran it inside the callback for the service worker install and fetch listeners and it prevented the error.

You can see the full commit of Paul's code here.

回答2:

perhaps the cache name is not unique from other applications, seems to fix the issue for me.

来源：https://stackoverflow.com/questions/48463483/what-causes-a-failed-to-execute-fetch-on-serviceworkerglobalscope-only-if