Service Worker Caches to much - service-worker

Question

I'mm working on a service worker, who should just cache some specific files.
But after implementation and refresh (yes I enabled "dumb sw after reload") there are much more files "loaded via the sw" then I added in the "files to cache" list.
I'm new with the service worker and have no idea what is wrong. I just followed some tutorials about it.
Here the code. Perhaps I am on the complete wrong way.
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/worker.js').then(function(registration) {
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
var debugMode = false;
//Variables to cache
var CACHE_NAME = 'companyname-cache-1511794947915';
var urlsToCache = [
'/typo3conf/ext/companyname/Resources/Public/css/animate.css',
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap.css',
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap.min.css',
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap-theme.css',
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap-theme.min.css',
'/typo3conf/ext/companyname/Resources/Public/css/main.css',
'/typo3conf/ext/companyname/Resources/Public/css/et/override.css',
'/typo3conf/ext/companyname/Resources/Public/css/et/screen-full.css',
'/typo3conf/ext/companyname/Resources/Public/css/et/screen-full.min.css',
'/typo3conf/ext/companyname/Resources/Public/Icons/favicon.ico',
'/typo3conf/ext/companyname/Resources/Public/Icons/FaviconTouch/android-chrome-512x512.png',
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener("activate", function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if(debugMode) {
console.log('actual cache name: %o', CACHE_NAME);
console.log('name inside the cache: %o', cacheName);
}
if ((cacheName.indexOf('companyname-cache-') !== -1) && (cacheName !== CACHE_NAME)) {
if(debugMode) {
console.log("old cache deleted");
}
return caches.delete(cacheName);
}
})
);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
if(debugMode) {
console.log("fetch 1");
}
return response;
}
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
if(!response || response.status !== 200 || response.type !== 'basic') {
if(debugMode) {
console.log("fetch 2");
}
return response;
}
var responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
if(debugMode) {
console.log("fetch 3");
}
return response;
}
);
})
);
});

Answer 1

The code in your SW works like this:
On installation, add all items in the URL LIST to the cache
On activation, check that the cache has items only for the CACHE NAME
On a fetch event: 1st check if the requested resource is in the cache and return if if found; 2nd if the requested resource was NOT in the cache, request it from the network AND put it in the cache
The last part of #3 causes the problem in your SW code – it is adding everything requested to the cache so in the future they're available from the cache.
You can see the problem in your code if you look for the last occurrence of this:
caches.open(CACHE_NAME)
That's the part of your code when something WASN'T found from the cache AND was requested from the network. The code is then putting it into the cache – that's not what you wanted.