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