Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker

[JTibblesSoftcon]

Operating System

Windows 10

Browser Version

Chrome Version 96.0.4664.55

Firebase SDK Version

9.5.0

Firebase SDK Product:

Messaging

Describe your project's tooling

JS (via webpack deployment)
Generic HTML (and/or Typo3 CMS) with PHP technology

Describe the problem

This is actually a follow-on and solution to these two closed bug reports, as no official solution was provided:

#6013
#5797

Cited information:
" Sometimes calling messaging getToken returns the error: Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker. It seems to only occur on the first page load, when the user refreshes the notifications work and there's no error anymore. "...

Please note I run the same code on two websites, swapping out the various keys required for each Firebase setup.
The websites are exact copies of each other, running as entirely separate websites.
On website there is no problem at all. On the second website I see the getToken error mentioned above.

After further testing I can confirm this issue is related to some issue picking up the "default" service worker if not explicitly referenced and registered.

getToken(messaging, { vapidKey: 'XXXXXX' }

As stated we don't have to send the serviceWorkerRegistration if it's using the default name. BUT sometimes (and there is no indication of why or when), the above request will return the error message without it. Perhaps it occurs when this initialisation code runs before the service worker has loaded in to memory? Or not.
Regardless, the solution (and I would like confirmation that this is the defacto solution) is to register and include the service worker before making this request, even if you are using the default service worker filename "firebase-messaging-sw.js".

const swRegistration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
getToken(messaging, { vapidKey: 'XXXXXX', serviceWorkerRegistration: swRegistration })

If this is the solution, perhaps it would be better to make the serviceWorkerRegistration field mandatory rather than optional?

Steps and code to reproduce issue

Steps to reproduce:
Add firebase-messaging-sw.js to root of domain
Call firebase initializeApp
Call firebase getMessaging
Ask and approve browser notification permission
Add firebase onMessage listener
Call firebaseawait getToken(messaging, { vapidKey: <VAPID_KEY> })
Error sometimes appears with Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker

Relevant Code:
firebase-messaging-sw.js is at the root of project and firebase gets initialised right away:

[FarzaneGhb]

Hi.
i have the same issue.
I get this error: "Error: AbortError: Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker " when I run my Flutter app for the first time on Chrome browser, but if I restart the app or refresh the browser page, the error disappears.

[JTibblesSoftcon]

Hi. i have the same issue. I get this error: "Error: AbortError: Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker " when I run my Flutter app for the first time on Chrome browser, but if I restart the app or refresh the browser page, the error disappears.

This is using Flutter for web? The problem stated above is for push notifications via web browsers (using Js service workers). Did you try registering the service worker before requesting the token?

   const swRegistration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
   getToken(messaging, { vapidKey:  'XXXXXX', serviceWorkerRegistration: swRegistration })

Did it solve the issue?

[53huzefa-zeenwala]

const swRegistration = await navigator.serviceWorker.register('/firebase-messaging-sw.js'); getToken(messaging, { vapidKey: 'XXXXXX', serviceWorkerRegistration: swRegistration })

where i need to add this above code in 'firebase-messaging-sw.js' or in lib folder

[JTibblesSoftcon]

const swRegistration = await navigator.serviceWorker.register('/firebase-messaging-sw.js'); getToken(messaging, { vapidKey: 'XXXXXX', serviceWorkerRegistration: swRegistration })

where i need to add this above code in 'firebase-messaging-sw.js' or in lib folder

In your library. Not in firebase-messaging-sw.js as this code is referencing/loading firebase-messaging-sw.js

[53huzefa-zeenwala]

sorry, i still don't get it. can you tell me exactly where I need to add this

const swRegistration = await navigator.serviceWorker.register('/firebase-messaging-sw.js'); getToken(messaging, { vapidKey: 'XXXXXX', serviceWorkerRegistration: swRegistration })
where i need to add this above code in 'firebase-messaging-sw.js' or in lib folder

In your library. Not in firebase-messaging-sw.js as this code is referencing/loading firebase-messaging-sw.js

Sorry, i still don't get this. can you tell me exactly where i need to add this.

[JTibblesSoftcon]

sorry, i still don't get it. can you tell me exactly where I need to add this

const swRegistration = await navigator.serviceWorker.register('/firebase-messaging-sw.js'); getToken(messaging, { vapidKey: 'XXXXXX', serviceWorkerRegistration: swRegistration })
where i need to add this above code in 'firebase-messaging-sw.js' or in lib folder

In your library. Not in firebase-messaging-sw.js as this code is referencing/loading firebase-messaging-sw.js

Sorry, i still don't get this. can you tell me exactly where i need to add this.

Load it on your web page wherever you want to detect push notifications. For me it's loadad on every web page

[ghost]

I have this error too in my NextJS application. Except my error persists and does not disappear on page refresh. The swRegistration solution above too does not work for me. The error is thrown by the getToken() function. I've searched everywhere for this fix, but found none! I have deadline tomorrow

[jcubic]

I have the same error, I followed documentation. And got this error when first worker is registered even when I add explicit worker registration. After refresh, I got error:

Registration failed - push service error

This is happened every time.

[jcubic]

I can create reproduction since I have basic code, I'm not even able to setup the messaging.

[dlarocque]

I can create reproduction since I have basic code, I'm not even able to setup the messaging.

Please share the code that reproduces your issue.

[jcubic]

Here is repro https://github.com/jcubic/firebase-sw-bug

The service worker use importScript and the reset of the code use firebase package from NPM compiled from TypeScript.

[rickypid]

@jcubic if you use it with flutter you must use the latest supported version:

https://github.com/firebase/flutterfire/blob/master/packages/firebase_core/firebase_core_web/lib/src/firebase_sdk_version.dart

[jcubic]

@rickypid I don't use Flutter.

[jcubic]

My issue was related to Brave see: Google push notifications - DOMException: Registration failed - push service error. The first error happened because of a bug in Firebase that require to register the Service Worker yourself. Adding serviceWorkerRegistration option to getToken solved the issue.

[hsubox76]

Sorry if I'm misunderstanding, but what is the bug in Firebase that you're referring to? It seems like from that link the problem is with Brave prohibiting notifications by default? Can you clarify what the Firebase bug is?

[jcubic]

@hsubox76 the main issue is that firebase suppose to register the service worker and use it. But it do not do this. It can't find the service worker unless you register it yourself. I call it a bug since in documentation there are no information about this hidden serviceWorkerRegistration option. If you follow documentation, you can't make service worker and notifications to work.

[hsubox76]

I think I identified a possible cause.

FYI I don't think it's related to providing the registration or not - for me, your repro project actually fails on the first try most of the time, but then succeeds on every subsequent time (until I unregister the service worker in devtools and try again). It has the same behavior even if I provide the registration explicitly.

I think it's a race condition.

When getToken() is called, it tries to register the service worker at that time if it hasn't been registered. Then we await navigator.serviceWorker.register and assume the service worker is ready to use (https://github.com/firebase/firebase-js-sdk/blob/main/packages/messaging/src/helpers/registerDefaultSw.ts#L27). Unfortunately, it has 2 other phases after that, install, and activate. I notice you have skipWaiting in your service worker to try to speed through these phases but unfortunately the install and activate events only fire when install and activation begins (or ends?). Anyway basically, getToken() goes on to call swRegistration.pushManager.subscribe which throws that error if the registration has not finished activating. https://github.com/firebase/firebase-js-sdk/blob/main/packages/messaging/src/internals/token-manager.ts#L163

I think we have to have registerDefaultSw() (in the first link) also await navigator.serviceWorker.ready https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/ready which resolves after SW activation.

Trying to think of if this will have any unintended consequences. I guess if it never activates, for whatever reason, it could cause the app to hang.

[jcubic]

Thanks for explanation, but I will not use notification with Firebase, the API is silly. It was simple now is really hard to use. It looks like Google don't care about DX and make it harder and harder to use this API.

Basically, I don't care anymore that this doesn't work out of the box.

[hsubox76]

Ok, well, thanks for your helpful repro project at least! If we manage to fix this bug I'm sure your efforts will be appreciated by any other users having this issue who are still using the SDK.