0

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.

Piyush Das
  • 610
  • 1
  • 7
  • 18
  • After reloading the page, is the service worker still the same (see number of service worker in chrome dev tools "Service Workers" settings) or does the installation happens again? – Stef Chäser Oct 30 '17 at 16:45
  • Yes, the installation happens. I log the installation event trigger and can see a cache pocket created in cache storage for the service worker. The service worker status also is running. – Piyush Das Oct 30 '17 at 16:58
  • I mean does the installation happen again when you reload the browser (after the first installation was successful)? – Stef Chäser Oct 31 '17 at 09:44
  • My issue is resolved now. All I did, was move the service-worker.js from static root (as seen in the question above) to my project root. Everything worked perfectly. But what I do not understand is that, when I had my service-worker.js in static root, even then I was caching only static files. So they anyway were in the scope of my service worker. But that did not work. – Piyush Das Nov 01 '17 at 12:45
  • i am facing the same issue now(using nodejs & ejs template), how can i access the sw.js from project root into ejs file ? – Karthik Mar 27 '21 at 06:25

0 Answers0