Firebase: change the location of the service worker
I am trying to use Firebase messaging (web). Firebase by default searches for the file "firebase-messaging-sw.js" which holds the service worker.
The service worker script is expected to be on the absolute path of the application! For example : http://localhost/firebase-messaging-sw.js
How to change this default location?! Searching the official docs I found this method: useServiceWorker
which accepts a service worker registeration, but trying to use it I get an error that the method doesn't even exist!
So, How to change the location of the service worker for firebase messaging?
As Michael has called out, the method to use is useServiceWorker(<registration>)
.
https://firebase.google.com/docs/reference/js/firebase.messaging.Messaging#useServiceWorker
The Messaging class is what is returned when you callfirebase.message()
.
So the sample would be:
navigator.serviceWorker.register('./example/sw.js')
.then((registration) => {
messaging.useServiceWorker(registration);
// Request permission and get token.....
});
I just tried this on the demo app on Github without issue: https://github.com/firebase/quickstart-js/tree/master/messaging
You should be able to do firebase.messaging().useServiceWorker(registration)
and pass in an existing service worker registration. Note that you should do this as early as possible, before any calls to e.g. getToken()
or onMessage()
.
I know that it is an old question but as useServiceWorker
is deprecated now, it is good to mention that you can pass the service worker directly to the getToken
. Current document
const registration = await navigator.serviceWorker.ready;
const messaging = firebase.messaging();
const token = await messaging.getToken({
serviceWorkerRegistration: registration,
vapidKey: "",
});
I think it is:
const vapidKey = 'foo123...';
const serviceWorkerRegistration = await navigator
.serviceWorker
.register('/build/firebase-messaging-service-worker.js');
await getToken(messaging, {
vapidKey,
serviceWorkerRegistration,
})...
But note that if you copy this code the scope gets wrong I think (because of the path, in my example: /build/...
).