where to put firebase-messaging-sw file in angular app

[vishnu038]

I am struck while registering service worker. I have created sample project there i have added firebase-messaging-sw.js file at root level like this at root level
and manifest.json file later i did " grunt serve " after launching app able to register service worker and token is generated , and it is working fine .

after that I tried Implementing that feature in actual working project , I have added at root level giving
Uncaught Error: [$http://injector:modulerr] Failed to instantiate module App due to:
Error: [$http://injector:modulerr] Failed to instantiate module lazyModel due to:
Error: [$http://injector:nomod] Module 'lazyModel' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. this Error.

and also i have added manifest.json file at root level its not loading in browser .

Now the question is for " grunt serve " project is working fine , for " grunt build " generated a dist added that that in war file below the WEB INF . why it is not working for grunt build ??

dist is not not packging the file.

for my actual project the path is http://localhost:8080/XXXXXX/index.html#/core/login i am using this path "grunt build " generated dist .

for my sample project http://localhost:9000/#/ used grunt serve.

[gauntface]

It needs to be at the root, otherwise try the useServiceWorker() method which allows you to register a service worker yourself meaning the file can be anywhere.

[vishnu038]

I added this code to register a service worker

navigator.serviceWorker.register("firebase-messaging-sw.js", {scope: "firebase-cloud-messaging-push-scope"}).then(function (registration) {
const messaging = firebase.messaging();
messaging.useServiceWorker(registration);

}).catch(function (err) {
  // registration failed :(
  console.log('ServiceWorker registration failed: ', err);

});

If i didnt add {scope: "firebase-cloud-messaging-push-scope"} its not registering its giving errors.

If I add firebase-messaging-sw file directly without the above code it is expecting a script URL http://localhost:8080/firebase-messaging-sw but my base URL is this http://localhost:8080/XXXXXX/ so it is giving a 404 error file not found.

Now the question is why by adding {scope: "firebase-cloud-messaging-push-scope"} i am able register a service worker?? is this correct way of doing?? and also am able to generate a Token, now the service worker starts with the scope URL http://localhost:8080/XXXXXX/firebase-cloud-messaging-push-scope and Script URL is http://localhost:8080/XXXXXX/firebase-messaging-sw.

[gauntface]

You can do:

navigator.serviceworker.register('/XXXXX/sw.js')
.then((registration) => {
  messaging.useServiceworker(registration);
});

The scope is something Firebase SDK does to avoid any issues with developers who want to cache files / assets as well as use push.

Since this will be a service worker you've defined you can use it for push and offline.

If you want to add a scope, just make sure it starts with '/XXXXX/

navigator.serviceworker.register('/XXXXX/sw.js', {scope: '/XXXX/non-existant-path/')

[samtstern]

Looks like @gauntface answered this so going to close as resolved.