Firebase：更改服务工作者的位置

Question

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?

Answer 1

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 call firebase.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

Answer 2

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 eg getToken() or onMessage() .

Answer 3

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: "",
        });

Answer 4

By using useServiceWorker(registration) you can use notificationonclick event on Firebase push messaging via exiting service worker.

firebase.messaging().useServiceWorker(registration) is working and solved my problem, but keep in mind that I don't know if:

• this is a secure way to get payload from the server.

• this is the best way to handle push notifications.

Answer 5

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/... ).