getToken pending after refresh in Chrome

[frankA10019]

Operating System

macOS Sonoma 14.1.1（23B81）

Browser Version

Chrome 124.0.6367.156

Firebase SDK Version

9.23.0

Firebase SDK Product:

Messaging

Describe your project's tooling

react

Describe the problem

GetToken only work success when first time open the Chrome. If I refresh the page, then getToken function getting pending. Then I close the chrome and reopen it. The getToken return the fcm token success. I try refresh the page in safari. GetToken function always works perfectly. It seems only happen on the Chrome.

Steps and code to reproduce issue

const app = initializeApp(configs.firebaseConfig);
async function initialFirebase() {
  try {
    let permission = Notification.permission;
    if (permission === 'default' || permission === 'denied') {
      Toast({
        msg: 'please open the notification permission',
        timeout: 50000,
        type: 'warning',
      });
    }

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker
        .register(`./${configs.firebaseFile}`, { scope: '/' })
        .then(function (registration) {
          return;
        })
        .catch(function (err) {
          console.error('loginFirebaseFailure', err);
        });
    } 
  } catch (e) {
    // eslint-disable-next-line no-console
    console.error(e);
  }
}

const getRegistrationTokens = async () => {
  const messaging = getMessaging(app);
  let registrationTokens = null;
  registrationTokens = await getToken(messaging, {
    vapidKey: configs.vapid_key,
  });
 console.log(registrationTokens)
  if (registrationTokens)
    window.localStorage['registrationTokens'] = registrationTokens;
  return registrationTokens;
};

useEffect(()=>{
  const initAndGetToken = async ()=>{
    await initialFirebase()
    await getRegistrationTokens()
  }
  initAndGetToken()
},[])

[dlarocque]

Hi @frankA10019, I was unable to get this code working. Could you provide additional information:

• How and where are you running the application?
• Are you using React?
• What is configs.firebaseFile?

I also noticed that you catch errors and log them. Are there any errors with registering your service worker?

[frankA10019]

Hi @dlarocque,

1. I run my application with nx. nx official website
2. Yes, I use React.
3. Configs.firebaseFile is a path that show where firebase-messaging-sw-dev.js file is.

[dlarocque]

Hi @dlarocque,

1. I run my application with nx. nx official website
2. Yes, I use React.
3. Configs.firebaseFile is a path that show where firebase-messaging-sw-dev.js file is.

Hi, unfortunately I'm still having issues reproducing the issue and getting your code running in my React app. Could you share a minimal app with steps I can follow to run it so that I can reproduce the issue?

[google-oss-bot]

Hey @frankA10019. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[google-oss-bot]

Since there haven't been any recent updates here, I am going to close this issue.

@frankA10019 if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.