CODEWITHSUNDEEP
angularjsnode.jsservice-worker
Pyae Phyoe Shein
Pyae Phyoe Shein

Reputation: 13827

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

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.

Upvotes: 4

Views: 5526

Answers (2)

Alexander Borisov
Alexander Borisov

Reputation: 1199

Recommendation:

There is a great article on a medium that answers your question and dives even deeper explaining service workers in great detail. I strongly recommend reading it for everyone who is interested in implementing service workers on their website.

Link: https://medium.com/jspoint/service-workers-your-first-step-towards-progressive-web-apps-pwa-e4e11d1a2e85

Also, this article on MDN.

Link: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

Answer:

To put it super simple, your service worker has a scope that is defined by the place of the serviceWorker.js in your project structure.

Example: If the service worker is placed in the /app/serviceWorker.js, you will only have an access to an /app/ folder, and everything that lies inside of the /app/ folder, for instance,/app/pages/ folder. All files outside of the /app/ folder will be outside of the serviceWorker.js scope. Thus, unreachable.

There are two solutions to that:

  • Put your serviceWorker.js to a root folder so that it will have a global scope of /. Basically, a scope with access to all files in your project. Perhaps, this is the easiest solution and the fastest.

  • Though at some point you might end up having a lot of workers in your project, it would be wise to structure them by creating a /workers/service-workers/ folder. So, what do you about it? How do you define a global scope in that case? Luckily, there is an alternative solution. serverWorker.js can be served with a response header Service-Worker-Allowed: /. This will allow providing a global scope for a server worker regarding its place in our project. However, this will require us to change server settings and this sometimes can not be feasible for specific reasons. If you have an access to server settings, or you have the ability to contact those who are in charge, I recommend you to read this topic where they discuss how to implement the response header Service-Worker-Allowed: / on the server side.

Link: How exactly add "Service-Worker-Allowed" to register service worker scope in upper folder

Upvotes: 0

Jeff Posnick
Jeff Posnick

Reputation: 56104

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.

Upvotes: 6

Related Questions