getToken throw error : DOMException: Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker

[EricaLi123]

Operating System

win 10

Browser Version

chrome 118.0.5993.71 (Official Build) (64-bit)

Firebase SDK Version

10.4.0

Firebase SDK Product:

Messaging

Describe your project's tooling

https://www.gstatic.com/firebasejs/10.4.0/firebase-app-compat.js
https://www.gstatic.com/firebasejs/10.4.0/firebase-messaging-compat.js

Describe the problem

1. clear cookie
   

2. when open my web site for the first time, getToken throw the following error【NG】
   

3. when open my web site for the second time or refresh the tab, getToken works fine.
   

Steps and code to reproduce issue

return this.messaging.getToken({
            vapidKey : this.vapidKey,
        }).then((currentToken) => {
            if (currentToken) {
                console.log(currentToken);
                return currentToken;
            } else {
                console.log('No Instance ID token available. Request permission to generate one.');
                return null;
            }
        }).catch((err) => {
            console.error(err);
        });

[duc-gp]

having the same issue. it seems the service worker file firebase-messaging-sw.js is installed when called getToken() for the first time, after refreshing and calling getToken again it then works..

[baryosef-loops]

I have similar issue as well.
Reproducible in chrome 118 and safari.
Seems to be critical, I haven't use the API before chrome 118, so can't say if it is a regression. Is there any insight here from the team @jbalidiong ?

[EricaLi123]

So I took this temporary approach to the problem.

this.messaging
      .getToken({
          vapidKey : this.vapidKey,
      }).catch((err) => {
          // https://github.com/firebase/firebase-js-sdk/issues/7693
          // 如果 getToken 时是还没注册 firebase-messaging-sw.js，就会报错如下，再次执行 getToken 就好了
          const error = "AbortError: Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker";
          if (err.toString() === error) {
              return this.messaging.getToken({
                  vapidKey : this.vapidKey,
              });
          } else {
              throw err;
          }
      })
      .then((currentToken) => {
          if (currentToken) {
              console.log(currentToken);
              return currentToken;
          } else {
              console.log(
                  'No Instance ID token available. Request permission to generate one.'
              );
              return null;
          }
      })
      .catch((err) => {
          console.error(err);
      });

I look forward to letting me know when this issue is completely fixed

[dpeese]

Facing same issue with latest firebase 10.5.0. Please help with the fix.

[ejirocodes]

@dpeese this solution worked for me

So I took this temporary approach to the problem.

this.messaging
      .getToken({
          vapidKey : this.vapidKey,
      }).catch((err) => {
          // https://github.com/firebase/firebase-js-sdk/issues/7693
          // 如果 getToken 时是还没注册 firebase-messaging-sw.js，就会报错如下，再次执行 getToken 就好了
          const error = "AbortError: Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker";
          if (err.toString() === error) {
              return this.messaging.getToken({
                  vapidKey : this.vapidKey,
              });
          } else {
              throw err;
          }
      })
      .then((currentToken) => {
          if (currentToken) {
              console.log(currentToken);
              return currentToken;
          } else {
              console.log(
                  'No Instance ID token available. Request permission to generate one.'
              );
              return null;
          }
      })
      .catch((err) => {
          console.error(err);
      });

I look forward to letting me know when this issue is completely fixed

[pcriadoperez]

Running into the same issue. So is the recommended solution to just retry if it fails?

[benixal]

register Firebase service worker before getToken:
navigator.serviceWorker.register("/firebase-messaging-sw.js", { scope: "/firebase-cloud-messaging-push-scope" })

[KhanhKitin]

Hi bro. I am also facing a similar issue as you. And I fix it as follows.

const getOrRegisterServiceWorker = () => {
  if ('serviceWorker' in navigator) {
   return window.navigator.serviceWorker
     .getRegistration('/firebase-cloud-messaging-push-scope')
     .then((serviceWorker: TODO) => {
       if (serviceWorker){
         return serviceWorker;
       } 
       return window.navigator.serviceWorker.register('/firebase-messaging-sw.js')
       .then((serviceWorker: TODO)=>{
             console.log("success registering SW");
       }).catch((err)=>{
         console.log("registering failed",err);
       });
     }
 )}
 throw new Error('The browser doesn`t support service worker.');
};


export const requestToken = async () => {
  let currentToken = "";
  try {
    const serviceWorkerRegistration = await getOrRegisterServiceWorker();
    currentToken = await getToken(messaging, {
      vapidKey: key,
      serviceWorkerRegistration
    });
  } catch (error) {
    console.log("An error occurred while retrieving token. ", error);
  }
  return currentToken;
};