Why self.addEventListener of service-worker does not work in angularjs

Question

I'm now trying to use service-worker as offline first in my angularjs project. My Project is scaffolded by yeoman as put those lines in service-worker as follow.

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching App Shell');
      return cache.addAll(filesToCache);
    })
  );
});

and called and register service-worker as follow in my index.jade

script.
    if('serviceWorker' in navigator) {
        navigator.serviceWorker
            .register('app/service-worker.js')
            .then(function() { 
                console.log('Service Worker Registered'); 
            })
            .catch(function(err) {
                console.log('ServiceWorker registration failed: ', err);
            });
    }

I have got Service Worker Registered message but problem is all sort of addEventListener in service-worker are not fired whenever app is running.

self.addEventListener('install', function(e) 

self.addEventListener('activate', function(event) {

self.addEventListener('fetch', function(e) {

Please help me to solve which I missed out to code.

Answer 1

The service worker you register is located at app/service-worker.js, which means that the effective scope of your service worker is app/. Only pages that live under app/ will be controlled by this service worker.

You should ensure that the service worker file you register is served from a path that corresponds to the maximum scope that you need. If you move your service-worker.js file up one path level, and register it as service-worker.js instead of app/service-worker.js, it's effective scope will contain the current page as well as any pages served out of sub-paths.