Uncaught FirebaseError: Messaging: This method is available in a Window context

Question

I'm using Firebase service worker for web push notification. Currently, I am facing this error:

Uncaught FirebaseError: Messaging: This method is available in a Window context. (messaging/only-available-in-window).

I am using a website on my desktop to register the SW. How do I resolve this issue?

Error stack I'm getting in console.

browserErrorMessage: "Failed to register a ServiceWorker: ServiceWorker script evaluation failed"
code :"messaging/failed-serviceworker-registration"
message :"Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: ServiceWorker script evaluation failed (messaging/failed-serviceworker-registration)."
stack: "FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: ServiceWorker script evaluation failed (messaging/failed-serviceworker-registration).↵    at https://www.gstatic.com/firebasejs/3.7.0/firebase.js:555:225"
__proto__: Error

Thank you

Solution 1

This method should be there in the main javascript file, NOT in service worker. Service Worker works in the background.

    messaging.onMessage(function(payload) {
      console.log("Message received. ", payload);
      // ...
    });

Solution 2

Please keep the Line, it is very much required in the SW:

const messaging = firebase.messaging();

The Issue is not Messaging itself, but most likely a part of it that is used in your SW which however is not supported in there.

Sadly I can't see your Code from the SW, but what was causing this issue for me was that I implemented the following to receive Messages, while the Website is in foreground:

messaging.onMessage(function(payload) {
  console.log("Message received. ", payload);
  // ...
});

This however requires the window context and needs to be implemented in the actual website, not the SW. For me this caused the Error you described.

Try using Firebases sample SW. This is doing everything it needs to and allows you to receive Notifications in the Background.

If you want to share your SW code, we could have a look at it.

Comments

[tutankhamun]

That's wrong. Look at another answer (by PaulPaulsen)

[Hugo Gresse]

apiKey != cloud messaging server key. BTW, you should only need the server id not the server key

[Deepak]

@kimberlee did you try this? Did it help?

[Matt Austin]

Hi, I have this issue too. The messaging variable is defined in my service worker so I can't reference it in the main javascript file. Surely I don't need to initialize firebase twice (once in service worker and once in the web app)? Is there an elegant/efficent way to subscribe to messages in both foreground and background?

[Peter]

@MattAustin Did you manage to solve your problem? Also curious at the moment.

[Matt Austin]

@Peter the following is working well for me to avoid initializing twice... var fbase = !firebase.apps.length ? firebase.initializeApp({ 'messagingSenderId': '<MY_ID>' }) : firebase.app(); const messaging = fbase.messaging()