Cannot get IOS token first time

[bangluong]

Operating System

IOS 18.3

Environment (if applicable)

safari

Firebase SDK Version

10.14.0

Firebase SDK Product(s)

Messaging

Project Tooling

reactJS and webpack

Detailed Problem Description

I create requestPermission and get token after login.
after iphone ask permission to push notification, I got error browser not supported.

but if I logout and login again it get token successfully

Steps and code to reproduce issue

here is my code:

const messaging = (async () => {
    const isSupportedBrowser = await isSupported();

    if (isSupportedBrowser) {
        return getMessaging(firebase);
    }
    return null;
})
export const getMessagingToken = async () => {
    let currentToken = "";
    const messagingResolve = await messaging();
    if (!messagingResolve) return;
    try {
        currentToken = await getToken(messagingResolve, {
            vapidKey: process.env.FIREBASE_VAPIDKEY
        });
    } catch (error) {
        console.log("An error occurred while retrieving token. ", error);
    }
    return currentToken;
};

at login function, I add this code:

if (Notification) {
                    const permission = await Notification.requestPermission();
                    if (permission === "granted") {
                        const firebaseToken = await getMessagingToken();
                        await pushToken({
                            variables: {
                                token: firebaseToken
                            }
                        });
                    }
                }

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

I can't reproduce the error with the code you provided. You say "after iphone ask permission to push notification, I got error browser not supported." but can you specify what line is causing that error? That makes it sound like it's happening on Notiification.requestPermission(), is that correct? Or in getMessagingToken()? Do you have the stack trace of the exact error in your console that would show what line is throwing and when?

Also, what does pushToken() do?

[bangluong]

I got error when try to get token: Subscribing for push requires an active service worker

pushToken just send token to server

[comxd]

@bangluong About SW, from the FCM doc:

FCM requires a firebase-messaging-sw.js file. Unless you already have a firebase-messaging-sw.js file, create an empty file with that name and place it in the root of your domain before retrieving a token. You can add meaningful content to the file later in the client setup process.

https://firebase.google.com/docs/cloud-messaging/js/client

About your error described in your first message, see #8356

[dlarocque]

I got error when try to get token: Subscribing for push requires an active service worker

@bangluong This error is different from the error you first described in the issue. Are you seeing an error that the browser is not supported, or that the service worker is not active?

Also, you mentioned that 'logout and login again it get token successfully'. Are you using Firebase Auth here? If so, could you please share that code?

[bangluong]

@dlarocque what is Firebase Auth? here is my full code:

import { initializeApp } from "firebase/app";
import { getMessaging, getToken, isSupported, onMessage } from "firebase/messaging";

const firebase = initializeApp({
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MERCHANT_ID
});
const messaging = (async () => {
    const isSupportedBrowser = await isSupported();

    if (isSupportedBrowser) {
        return getMessaging(firebase);
    }
    return null;
})
export const getMessagingToken = async () => {
    let currentToken = "";
    const messagingResolve = await messaging();
    if (!messagingResolve) return;
    try {
        currentToken = await getToken(messagingResolve, {
            vapidKey: process.env.FIREBASE_VAPIDKEY
        });
    } catch (error) {
        console.log("An error occurred while retrieving token. ", error);
    }
    return currentToken;
};

I checked that currentToken is return "" and I log error.message. it is 'Subscribing for push requires an active service worker'.