getToken pending after refresh in Chrome #8238
Description
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()
},[])