Something I ran into once when I was testing your site was that there was a 525 response for some resource. This is a bad SSL handshake, meaning the service worker either couldn't be grabbed over SSL or some content it is supposed to cache can't be fetched for caching. This seems to be an intermittent server side issue since it only happens occasionally. My guess is that when you're installing sometimes it will give you a 525 response to something which makes the service worker get stuck in installing mode, and when you unregister and update it the server is once again working and you can install it properly.
Other than that your service worker seems to work just fine, it installs and everything loads from cache as it should.
Try to upload your site to some other server and see if the error persists, or better yet run a small localhost server to test your service worker in. If you want a really simple one install node.js and run 'npm install -g http-server', then open a terminal/command prompt inside your site root folder and run 'http-server -o' and it will run and open a testing server in your default browser.
Last note, when registering your service worker, don't check for https, if you run on localhost or 127.0.0.1 your service worker can still be run and tested without the need for https, and if your site is live it can't run without https, no need to check for it. Checking for https isn't a problem per se but it isn't necessary and it makes you unable to test your service worker locally.
Addition
You seem to be confusing the red bar for the yellow service worker bar. Your service worker is only storing index.html, which is 3.4 kb in size. The rest of the cached memory in red isn't handled by your service worker.
Example ServiceWorker.js
This service worker will cache specified resources to the cache, and if resources are fetched that aren't specified in the CACHE object it will attempt to add entries dynamically to the cache (good in case you forget to update your service worker with all your latest content). It uses cache first, if not in cache get from network and store in cache for later visits.
This script is tried and tested, use it as a basis for your own project if you like.
'use strict';
// Our current cache version and its contents.
var CACHE = {
version: 'site-version-number',
resources: [
'/index.html', // caches index.html
'/css/' // caches all the contents inside the /css folder
]
};
// Install service worker, adding all our cache entries
this.addEventListener('install', function (event) {
event.waitUntil(
caches.open(CACHE.version).then(function (cache) {
return cache.addAll(CACHE.resources);
})
);
});
// Handle a fetch request. If not fetched from cache, attempt to add to cache.
this.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request).then(function (resp) {
return resp || fetch(event.request).then(function (response) {
return caches.open(CACHE.version).then(function (cache) {
cache.put(event.request, response.clone()).catch(function (error) {
console.log('Could not add to cache!' + error);
});
return response;
}).catch(function (error) {
console.log('Could not open cache!' + error);
});
}).catch(function (error) {
console.log('Resource not found!' + error);
});
}).catch(function (error) {
console.log('Resource not found in the cache!' + error);
})
);
});
// Activate service worker
this.addEventListener('activate', function (event) {
// Remove all caches that aren't whitelisted
var cacheWhitelist = [CACHE.version];
event.waitUntil(
caches.keys().then(function (keyList) {
return Promise.all(keyList.map(function (key) {
if (cacheWhitelist.indexOf(key) === -1) {
return caches.delete(key);
}
}));
})
);
});
