Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

enter image description here

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?

like image 480
N. Dias Avatar asked Jan 26 '18 14:01

N. Dias


1 Answers

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.

like image 112
rjbultitude Avatar answered Oct 24 '22 02:10

rjbultitude