I am using service workers in one of my projects. On call, my service worker gets successfully registered and it caches all provided URLS. But when I reload my page, all cached data is either picked from disk cache or memory cache and not from service worker. I refered this question Service worker is caching files but fetch event is never fired and cross checked that there is not a problem with scoping.
service-worker.js
var CACHE_NAME = 'home-screen-cache';
var urlsToCache = [
'/static/client-view/fonts/fontawesome-webfont.eot',
'/static/client-view/fonts/fontawesome-webfont.woff',
'/static/client-view/fonts/fontawesome-webfont.ttf',
'/static/client-view/fonts/fontawesome-webfont.svg',
'/static/css/cricket.css',
'/static/client-view/js/jquery.mobile.custom.min.js',
'/static/client-view/js/jquery-2.1.4.min.js',
'/static/js/cricket_matches.js'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
console.log("Found in cache");
return response;
}
console.log("Not found in cache");
return fetch(event.request);
}
)
);
});
service-worker registration script
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('{% static 'service-worker.js' %}').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
If you need any kind of additional data, mention in comments. Please help.