Angular-cli: Including service worker file "firebase-messaging-sw.js"

[runtimeZero]

As per the guidelines, in order for firebase messaging to function, the file file "firebase-messaging-sw.js" should be included at root level.

As you can see from this screenshot, I have included the same

The firebase app get's initialized in my app.component.ts and all of it's services work fine. However, the minute I try to fetch a messaging token .. i get the following error:

user.service.ts:26 ERROR requesting token FirebaseError {code: "messaging/failed-serviceworker-registration", message: "Messaging: We are unable to register the default s…t. (messaging/failed-serviceworker-registration).", browserErrorMessage: "Failed to register a ServiceWorker: A bad HTTP res…code (404) was received when fetching the script.", __zone_symbol__currentTask: ZoneTask, stack: "FirebaseError: Messaging: We are unable to registe…ttp://localhost:4200/polyfills.bundle.js:2776:47)"}browserErrorMessage: "Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script."code: "messaging/failed-serviceworker-registration"message: "Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration)."__zone_symbol__currentTask: ZoneTaskstack: "FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration).↵ at http://localhost:4200/vendor.bundle.js:96127:44↵

The problem as I understand is that the firbase messaging system is unable to locate the file, firebase-messaging-sw.js

SOLUTIONS TRIED

1. Include the service worker file under scripts in angular-cli.json ... does NOT work
   See Screenshot

2. Generate a distribution of the app and then MANUALLY place the service worker file in the dist folder

See Screenshot

THIS WORKS! BUT is not a feasible for two reasons

1. during development as I cannot use the files in dist/ folder
2. Very risky in production as all file in dist folder are deleted and recreated by angular-cli and if one forgets to MANUALLY add the service worker file, then the entire messaging system will fail to work in production

Does anyone know of a solid solution for this issue ?

[intellix]

How about: "firebase-messaging-sw.js" as it should already be relative to src

[intellix]

And also try adding it to assets

[clydin]

Documentation related to asset configuration can be found here: https://github.com/angular/angular-cli/wiki/stories-asset-configuration

[sumitarora]

Closing as above.

[shreya-work]

Thanks @intellix and @clydin .. issue resolved

[iqab]

I am also facing this issue

Notification permission granted.
A bad HTTP response code (404) was received when fetching the script.
/firebase-messaging-sw.js Failed to load resource: net::ERR_INVALID_RESPONSE
(index):242 An error occurred while retrieving token. V {code: "messaging/failed-serviceworker-registration", message: "Messaging: We are unable to register the default s…t. (messaging/failed-serviceworker-registration).", browserErrorMessage: "Failed to register a ServiceWorker: A bad HTTP res…code (404) was received when fetching the script.", stack: "FirebaseError: Messaging: We are unable to registe…sejs/3.6.3/firebase.js:529:225↵ at "}
(index):243 Uncaught (in promise) ReferenceError: showToken is not defined
at (index):243
at
(anonymous) @ (index):243
Promise rejected (async)
(anonymous) @ (index):241
Promise resolved (async)
(anonymous) @ (index):217

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}