Unable to register the default service worker due to redirect or 404

[elliotsabitov]

[REQUIRED] Describe your environment

• Operating System version: MacOS 10.14.4
• Browser version: Chrome 79.0.3945.130
• Firebase SDK version: 6.6.2
• Firebase Product: Cloud Messaging

[REQUIRED] Describe the problem

Steps to reproduce:

The issue is that firebase is unable to register service worker when the application is hosted within a sub directory. We have domain.com/path/index.html and firebase gives the following error:

Unable to get permission to notify. FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('https://domain.com/firebase-cloud-messaging-push-scope') with script ('https://domain.com/firebase-messaging-sw.js'): The script resource is behind a redirect, which is disallowed. (messaging/failed-serviceworker-registration).

It is getting redirect, because we have it set up this way, but I looked around online and saw that users have also experienced the same issues with 404s.

Related tickets:

https://github.com/firebase/quickstart-js/issues/109

Problem:

The compiled code has the following:

navigator.serviceWorker.register("/firebase-messaging-sw.js",{scope:"/firebase-cloud-messaging-push-scope"})

Solution:

Would be great if the compiled code had relative path:

navigator.serviceWorker.register("firebase-messaging-sw.js",{scope:"firebase-cloud-messaging-push-scope"})

Reason:

I looked around the firebase dependency code and saw the following in firebase/messaging/dist/src/models/default-sw.d.ts:

export declare const DEFAULT_SW_PATH = "/firebase-messaging-sw.js"; export declare const DEFAULT_SW_SCOPE = "/firebase-cloud-messaging-push-scope";

I think adjusting this and removing the leading slash "/" would resolve the issue.

Thank you very much in advance for your help!

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

The code change seems reasonable, but I'm double-checking that this change wouldn't break anyone else who is depending on it working the other way (absolute paths). In the meantime, I don't want you to be blocked, so are you able to work around this for now by creating and providing your own service worker to firebase.messaging().useServiceWorker() as described in a reply to the other PR you linked (https://github.com/firebase/quickstart-js/issues/109#issuecomment-284483328)?

[PaulBaugher]

Can confirm, this is blocking.

[hsubox76]

I'm planning to get someone to look at this soon, but does the workaround described in the above comment work for you, for now?

[elliot-sabitov]

We created a temporary script as a work around and we run it during build:

const replace = require('replace-in-file');
const options = {
  files: 'dist/*.js',
  from: "register(\"/firebase-messaging-sw.js\",{scope:\"/firebase-cloud-messaging-push-scope\"})",
  to: "register(\"firebase-messaging-sw.js\",{scope:\"firebase-cloud-messaging-push-scope\"})",
  allowEmptyPaths: false,
};

try {
  replace.sync(options);
  console.log('Firebase service worker path fixed!');
} catch (error) {
  console.error('Error occurred:', error);
}

[candidosales]

@elliotsabitovsulzer where you adding this code snippet? which file?

[zwu52]

@candidosales I assume you tried Matt's solution

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

(deprecated, now you would feed your sw-reg (located anywhere you want) through getToken) so something like

navigator.serviceworker.register('/path/sw.js')
.then((registration) => {
  getToken({registration, vapidKey});
});

what's the error message you are seeing with this approach?

[rajhim]

is there any solution please?

[zwu52]

is there any solution please?

Have you tried the above solutions? If issue still persist, please consider filing a new ticket that include more details and minimal code to reproduce your issue

[vladbraiko]

if you using Webpack in your project go to the configuration and add the next line

new CopyWebpackPlugin([
  { from: '[your root folder]/firebase-messaging-sw.js', to: 'firebase-messaging-sw.js' },
])

[elliotsabitov]

To add detail to my previous comment, essentially we have a fix.firebase.js script that contains the code above in my previous comment. Then in package.json we have:

"fix-firebase": "node fix.firebase.js",

and so we are then able to call npm run fix-firebase which we trigger after our build process (ng build) finished. The issue is that the built file has absolute path instead of relative, and the above snippet does a simple search and replace. The workaround works but is not the correct solution.