I'm registering my service worker, and in the registered callback, loading some cached files
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('swRoot.js').then(() => {
console.log('registered');
System.import('react');
System.import('react-dom');
System.import('a').then(({ a }) => console.log('value from a', a));
}, err => console.log(err));
}
It works, but it seems closing the browser tab, and re-opening it is causing the install event to re-fire, which somehow results in a growing number of fetches / cache hits (see below) to log. Once the page is open, subsequent soft refreshes behave as expected; I only see cache hits for the few files I'm loading.
So the very first time the service worker is installed, I see 3 cache hits, for the 3 files I'm loading. If I close and re-open, I get 6, then 9, etc. In any case, simply refreshing the page shows the original 3 cache hits as expected.
Why does closing and then re-opening the browser tab result in an increasing number of fetch events to fire for the same few files, but not on subsequent refreshes?
The entirety of swRoot.js is below
self.addEventListener('install', function(event) {
console.log('INSTALLED');
console.log('ADDING CACHE FILES');
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/react-redux/node_modules/react/dist/react-with-addons.js',
'/react-redux/node_modules/react-dom/dist/react-dom.js',
'/react-redux/a.js'
]).then(function(){ console.log('cache filling success'); }).catch(function(){ console.log('cache filling failure') });
})
);
});
console.log('ADDING FETCH at root level');
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
console.log('cache hit', event.request);
return response;
}
return fetch(event.request);
})
);
});
self.addEventListener('activate', function(event) {
console.log('ACTIVATE');
});
