Including service worker file "firebase-messaging-sw.js"

See original GitHub issue

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

Include the service worker file under scripts in angular-cli.json … does NOT work See Screenshot
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

during development as I cannot use the files in dist/ folder
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 ?

Issue Analytics

State:
Created 6 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

3reactions

intellixcommented, Jul 16, 2017

And also try adding it to assets

1reaction

clydincommented, Jul 17, 2017

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

Top Results From Across the Web

Receive messages in a JavaScript client - Firebase - Google

In order to receive the onMessage event, your app must define the Firebase messaging service worker in firebase-messaging-sw.js .

What is the use of firebase-messaging-sw.js ... - Stack Overflow

If you would like to use an existing service worker, you can use https://firebase.google.com/docs/reference/js/firebase.messaging.

Including service worker file "firebase-messaging-sw.js" #150

I ve placed my service worker file in root folder and it s accessible in http://localhost:<PORT NUMBER>/firebase-messaging-sw.js also I ve ...

Implement Push Notification with Service Worker and Firebase

From the example below, the service worker is the sw.js file. //check if browser supports service worker if('serviceWorker' in navigator){

Step 1: Configuration Firebase and Service Worker

Download the JavaScript file firebase-messaging-sw.js. · Create the Webapp-Project in Firebase and copy the configuration. · In the JavaScript file "firebase- ...