I'm trying to understand what the network tab in Chrome dev tools is telling me for cached files coming from Service Worker.
I'm seeing a cache hit get logged in the console (see the service worker code below), but the network tab is making it look like a regular network load. 230ms seems a bit big for a cache hit. And the value usually changes by a small amount (next load might be, say, 217ms) so it's not showing me the original time to load, when it was first cached, as I wondered.
The code registering the service worker is this
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));
}
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');
});
