Firebase: change the location of the service worker

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?

score 74 · Accepted Answer · edited Jan 28 '19 at 18:12

74

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

edited Jan 28 '19 at 18:12

stephen.hanson

9,014
2
47
53

answered Jan 17 '17 at 15:56

Matt Gaunt

9,434
3
36
57

It doesn't work anymore. See @Hamid Mayeli's answer. – Whip Oct 14 '21 at 09:59
1

The sample code doesn't exist in the repo – pratik mankar Aug 23 '22 at 13:54

score 19 · Answer 2 · answered Feb 19 '21 at 22:08

19

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

answered Feb 19 '21 at 22:08

Hamid Mayeli

805
1
14
24

Hi @Hamid, I followed your method to access the token but for the function `onBackgroundMessage` i'm getting this error - FirebaseError: Messaging: This method is available in a service worker context. (messaging/only-available-in-sw). could you please guide me on how to fix it? – Arjun Pandi Nov 10 '22 at 10:46

score 16 · Answer 3 · answered Jan 15 '17 at 21:58

16

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

answered Jan 15 '17 at 21:58

Michael Bleigh

25,334
2
79
85

Yes, sure. But trying this I get `method doesn't exist` ! – Dewan159 Jan 16 '17 at 07:38
1

This works for me -- are you sure that you did `firebase.messaging().useServiceWorker()` and not `firebase.messaging.useServiceWorker()`? – Michael Bleigh Jan 16 '17 at 22:47
2

Also note that this API was added in version 3.5.0 of the library, so make sure you've updated to at least that version. – jwngr Jan 17 '17 at 17:36
@MichaelBleigh, I followed your instructions like above in quickstart app, but I still get **TypeError: Failed to register a ServiceWorker for scope ('https://xxxxxx.net/') with script ('https://dmsxxxx.net/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script** error. Still firebsace looking in this https://dmsxxxx.net/firebase-messaging-sw.js location only. – kodali Apr 19 '20 at 05:58

score 4 · Answer 4 · answered Sep 22 '21 at 11:32

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

score 0 · Answer 5 · edited Dec 20 '17 at 08:57

0

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.

edited Dec 20 '17 at 08:57

Nander Speerstra

1,496
6
24
29

answered Dec 20 '17 at 07:14

Tushar Acharekar

880
7
21

1

Is this an answer to the question or are you asking questions (the bullet points) yourself? – Nander Speerstra Dec 20 '17 at 07:42
The bullet points are my queries, I dont have idea about security and performance while using Firebase Messaging with service worker. As this question is related to this topic, i am not going to create separate question. – Tushar Acharekar Dec 20 '17 at 08:44
I have edited the wording in your answer, so your bullet points are now considerations to other users (instead of questions). Your answer is a good addition to this question, thanks! – Nander Speerstra Dec 20 '17 at 09:01

Firebase: change the location of the service worker

5 Answers5

Linked

Related