Unchanged service worker is re-installing and re-caching

Question

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

Answer 1

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.

Most probably is that you are seeing previous logs. To verify, you can show the timeline of every log.

1. Go to dev tools settings F1 inside console or click on the icon (img1)
   
2. Check the option Show timestamps (img2).
   
3. Or simple add a console.log(new Date()); inside your fetch event handler.
   

Img1

Img2

Now you will be able to identify logs that are from previous requests. Your sw is not making extra request, just the console is keeping old logs.

To fix it, do right click inside the console and click on clear console history.

Hope this help.

Answer 2

It should not be there because the install event is called only once.I think the issue is in your chrome browser force update service worker is checked.Open developer console on chrome -> go to application tab -> service worker and uncheck update on reload.