Service event fetch never fires

Question

The name of the question says it all.

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/react-redux/sw.js').then(() => { console.log('registered'); }, err => console.log(err)); } 

---

EDIT

The root of the problem seems to be the way

 navigator.serviceWorker.register('/react-redux/sw.js') 

if i move the sw code so i have

 navigator.serviceWorker.register('swRoot.js').then(() => { 

then everything works correctly. I tried almost everything I can think of above, from dropping the leading slash in / react -redux to adding {scope: from './' , '/' , '/react-redux' , and no one worked (with some causes of errors).

Does anyone know what configuration magic is to be able to download a service worker from somewhere other than the root of your domain?

---

and then all my sw.js

 self.addEventListener('install', function(event) { console.log('hello'); try { console.log('typeof System in install', typeof System); } catch(e){} console.log('caching'); event.waitUntil( caches.open('v1').then(function(cache) { console.log('caching - getting'); return cache.addAll([ '/react-redux/a.js' ]); }).catch(function(error){ console.log('error', error) }) ); }); console.log('ADDING FETCH') self.addEventListener('fetch', function(event) { console.log('fetching ->', event.request); event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); }) ); }); 

I never get the console.log('fetching ->', event.request); message console.log('fetching ->', event.request); . I even added this nonsense to try to get the problem.

 setTimeout(() => fetch('/react-redux/foo.css').then(r => console.log(r)), 1000); setInterval(() => fetch('/react-redux/foo.css').then(r => console.log(r)), 5000); 

I see that sampling events are being executed, but the service worker never says that he hits these event handlers.

In addition, I receive a notification that SW is registered, and when I update sw.js, close and reopen it, I see all the logging instructions indicating that the installation is correct.

Answer 1

Getting the job of intercepting the extract seems to require that the registered employee of the service must be at or above the level of the tree with the employee registration HTML file. Below fails.

In Chrome, be sure to look at the "Office Worker" in the "Application" section. Even registering below causes the service activist to work, but when the location is on an HTML page or higher, you will also receive the entry indicated in the "Clients" section. The presence of this seems to match exactly when the sample will be intercepted.

Answer 2

Attach fetch event listener in install event handler

 self.addEventListener('install', function(event) { console.log("install"); try { console.log('typeof System in install', typeof System); } catch (e) {} console.log('caching'); event.waitUntil( caches.open('v1').then(function(cache) { console.log('caching - getting'); return cache.addAll([ 'a.js' ]); }).catch(function(error) { console.log('error', error) }) ); self.addEventListener('fetch', function(event) { console.log('fetching ->', event.request); event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); }) ); }); }); 

plnkr https://plnkr.co/edit/WuJCZSD0V4idG1Ra7VMb?p=preview

Answer 3

You're on the right track, this seems to be the problem.

To change the scope of a worker, this must be done during registration, for example:

 navigator.serviceWorker.register('scripts/sw.js', { scope: '/' }) 

Then the server should return the next response in response to confirm the change in this area.

 Service-Worker-Allowed: / 

See this answer