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

[sara-jegorova]

[REQUIRED] Describe your environment

• Operating System version: MacOS 12.0.1
• Browser version: Chrome Version 96.0.4664.55 (Official Build) (x86_64)
• Firebase SDK version: 9.5.0
• Firebase Product: messaging

[REQUIRED] Describe the problem

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.

Steps to reproduce:

1. Add firebase-messaging-sw.js to root of domain
2. Call firebase initializeApp
3. Call firebase getMessaging
4. Ask and approve browser notification permission
5. Add firebase onMessage listener
6. 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:

import { initializeApp } from 'firebase/app';
import { getMessaging,  isSupported, Messaging } from 'firebase/messaging';

isSupported()
  .then((supported) => {
    if (supported) {
      initializeApp(firebaseConfig);
      messaging = getMessaging();
    } else {
      console.error('Browser does not support notifications');
    }
  })

const registerToken = async (
  messaging: Messaging
): Promise<{ token?: string; error?: unknown }> => {
  try {
    const currentToken = await getToken(messaging, {
      vapidKey: <VAPID_KEY>,
    });

    // server call with token
    await api.registerToken(currentToken);
    return { token: currentToken };
  } catch (error) {
    // Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker
    return { error };
    }
};

Since firebase handles registering firebase-messaging-sw.js itself, I had a look at the codebase, and it seems the issue originates from:

firebase-js-sdk/packages/messaging/src/internals/token-manager.ts

Line 39 in f5a1714

const pushSubscription = await getPushSubscription(

https://github.com/firebase/firebase-js-sdk/blob/master/packages/messaging/src/internals/token-manager.ts#L164

[zwu52]

@sara-jegorova Thanks for reporting. We stopped supporting getToken for sw because it has some compatibility issue with older browser (v9 API doc. Please call getToken in window.
Cheers

[sara-jegorova]

@zwu52 Hi, sorry there was a miscommunication on my part, the code sample I gave is at the root of my project (index.ts), not in the service worker.

[zwu52]

hmm. I can't reproduce the error.

The error seems to indicate that the sw is unregistered by the time of the subscription call. You mentioned this is happens "sometimes" which is a bit intriguing to me. Because in registerDefaultSSw.ts file, we await for the registration process.

Do you mind making a minimum reproducible repo I can look deeper into?

[sara-jegorova]

I tried re-creating the setup I have but I wasn't able to reproduce the issue in there either. It is a rather tricky issue, because it only occurs when the user loads the page for the first time, and not for every user either... I'm attaching the setup anyways:
firebase-issue-5797.zip

[zwu52]

Sara,
Thanks for the repo. Unfortunately I couldn't reproduce on a freshly installed of your app. Below shows my console view

By "freshly installed", I removed the app's notification permission and cleared the site's cache.

My educated guess is that there might be some wired racing going with the React setup you have, I noticed many useEffect hooks were applied. I would suggest to clean up a bit so that you are calling app = getApp(), messaging=getMessaging(app) and getToken(messaging in this sequence.

Closing this ticket. Feel free to attach any further discovery and we could chat on the thread 🍻