Feature Requests: FCM for safari 16

[Abhishek2250]

As Safari 16 has now Push APIs support. Will FCM work for Safari 16?

Thanks

[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.

[vjekooo]

isSupported function returns true for Safari 16. Does that mean that FCM supports Safari or that Safari just supports all required browser APIs for web push?

[sman591]

The FCM quick start app runs background notifications successfully for me on Safari 16.2 with macOS Ventura. macOS 13 Ventura (released Oct 2022) is the minimum requirement according to Apple's documentation

[andreififiita]

I tried firebase messaging v9.16.0 in my app and it seems to work in background (when delivered by the service worker) but in foreground only receives notifications 3 times (messaging.onMessage handler).

[fred-boink]

The FCM quick start app runs background notifications successfully for me on Safari 16.2 with macOS Ventura. macOS 13 Ventura (released Oct 2022) is the minimum requirement according to Apple's documentation

I just tried on Safari tech preview 16.4 and I get this error, what version of firebase SDK you running?
getFCMToken error AbortError: Couldn't decode message

EDIT: It worked in 16.3 non preview.!

[fred-boink]

Unfortunately it does not work on iOS 16.4 beta

Unhandled Promise Rejection: FirebaseError: Messaging: This browser doesn't support the API's required to use the Firebase SDK. (messaging/unsupported-browser).

[andreififiita]

Unfortunately it does not work on iOS 16.4 beta

Unhandled Promise Rejection: FirebaseError: Messaging: This browser doesn't support the API's required to use the Firebase SDK. (messaging/unsupported-browser).

What firebase version are you using? (i assume frontend and service worker would have the same version)

[fred-boink]

Hi @andreififiita ,

both are running the latest (9.18.0)

[mavramopoulos]

hello, quick question, i am using a java backend with java 7 (unfortunately) so I have the java sdk ver 8.2.0 and for the service worker I am running 9.16.0 compat version, on chrome it works fine but in Safari I don't receive any notifications. Token registration and everything else works fine. Is it a version problem? (Can't go to java 8)

[andreififiita]

I managed to test firebase on iOS 16.4 and successfully receive notifications, but i do have a problem when application is in foreground: when the user is using the app (in focus), the notifications are received only 3 times (which come from data firebase messages). The notifications are displayed in the app's UI (for example the user is using a chat view to talk with another user, i do not display the notification in OS bar). This doesn't happen if the app is in background, when the notifications are delivered to the OS notification bar. But every time i tested on foreground, it fails receiving notifications more than 3 times. Also, if i call method to getToken() after this, firebase returns a new token (seems like the previous one is being invalidated). I have the same behavior on Safari on macos 13.3 Ventura. I am using 9.16.0 compat version (but i assume, using modular or compat versions shouldn’t have any behavioural differences, right?)

EDIT: on Chrome and Firefox (MacOS) everything works fine, no issues there.

[mavramopoulos]

@andreififiita did you change anything when you tried safari? Firebase on chrome with compat works for me. Safari background or foreground won't work whatever I do, network shows no notification.

[mavramopoulos]

i fixed it, it was a stupid bug in my code, the 3 notifications problem occurs to me too, the reason it happens to you @andreififiita is because for some arbitrary reason the token resets after 3 notifications, I noticed it because when I refreshed a new token was created.

[andreififiita]

i fixed it, it was a stupid bug in my code, the 3 notifications problem occurs to me too, the reason it happens to you @andreififiita is because for some arbitrary reason the token resets after 3 notifications, I noticed it because when I refreshed a new token was created.

Sorry, i forgot to explicitly mention: on Chrome and Firefox (MacOS) everything works fine, no issues there.

But did you manage to find a solution or workaround for why the foreground notifications only come 3 times and then it stops? (invalidated firebase token it seems)

[mavramopoulos]

Probably Safari deletes the token because it considers it spam?

[utkarsh-globant]

I managed to test firebase on iOS 16.4 and successfully receive notifications, but i do have a problem when application is in foreground: when the user is using the app (in focus), the notifications are received only 3 times (which come from data firebase messages). The notifications are displayed in the app's UI (for example the user is using a chat view to talk with another user, i do not display the notification in OS bar). This doesn't happen if the app is in background, when the notifications are delivered to the OS notification bar. But every time i tested on foreground, it fails receiving notifications more than 3 times. Also, if i call method to getToken() after this, firebase returns a new token (seems like the previous one is being invalidated). I have the same behavior on Safari on macos 13.3 Ventura. I am using 9.16.0 compat version (but i assume, using modular or compat versions shouldn’t have any behavioural differences, right?)

EDIT: on Chrome and Firefox (MacOS) everything works fine, no issues there.

@andreififiita : I am also having the same issue, on chrome and mozilla firefox it works perfectly, but on safari it just receives three notifications and then stop. What I have found is, if we are not able to publish notification to the notification center, safari revokes the token and we have to follow the workflow again for getting the new token. If you watch this video (last 5-10 mins), they have explicitly mentioned that after 3 notifications they will revoke the token if notification is not published to notification center.

Video

My point is as we are using FCM (onMessage handler) and generating the notifications using the new Notification() constructor, it should go to the notification center.

What I have observed and I did get more then 3 notifications is(background use case) : if we do not do any handling for the background message in service worker file, and just service worker do the work, we get the notifications without any issue.

But for foreground(when tab is active) we have to do(onMessage handler), otherwise no message will be shown.
I am working on it, will update you, if got any resolution.

[andreififiita]

I managed to test firebase on iOS 16.4 and successfully receive notifications, but i do have a problem when application is in foreground: when the user is using the app (in focus), the notifications are received only 3 times (which come from data firebase messages). The notifications are displayed in the app's UI (for example the user is using a chat view to talk with another user, i do not display the notification in OS bar). This doesn't happen if the app is in background, when the notifications are delivered to the OS notification bar. But every time i tested on foreground, it fails receiving notifications more than 3 times. Also, if i call method to getToken() after this, firebase returns a new token (seems like the previous one is being invalidated). I have the same behavior on Safari on macos 13.3 Ventura. I am using 9.16.0 compat version (but i assume, using modular or compat versions shouldn’t have any behavioural differences, right?)
EDIT: on Chrome and Firefox (MacOS) everything works fine, no issues there.

@andreififiita : I am also having the same issue, on chrome and mozilla firefox it works perfectly, but on safari it just receives three notifications and then stop. What I have found is, if we are not able to publish notification to the notification center, safari revokes the token and we have to follow the workflow again for getting the new token. If you watch this video (last 5-10 mins), they have explicitly mentioned that after 3 notifications they will revoke the token if notification is not published to notification center.

Video

My point is as we are using FCM (onMessage handler) and generating the notifications using the new Notification() constructor, it should go to the notification center.

What I have observed and I did get more then 3 notifications is(background use case) : if we do not do any handling for the background message in service worker file, and just service worker do the work, we get the notifications without any issue.

But for foreground(when tab is active) we have to do(onMessage handler), otherwise no message will be shown. I am working on it, will update you, if got any resolution.

Hi, i also tried creating "new Notification()" in the foreground onMessage() handler but it still failed. I believe i also tried sending a postMessage to the service worker (last test a few months ago), and still failed. So i am am not sure where exactly safari "counts 3 times". Also, from what i know, the service worker's messaging.onBackgroundMessage() won't be executed if the app is in foreground. Maybe is there a way to go around this, at least for the time being?

[utkarsh-globant]

I managed to test firebase on iOS 16.4 and successfully receive notifications, but i do have a problem when application is in foreground: when the user is using the app (in focus), the notifications are received only 3 times (which come from data firebase messages). The notifications are displayed in the app's UI (for example the user is using a chat view to talk with another user, i do not display the notification in OS bar). This doesn't happen if the app is in background, when the notifications are delivered to the OS notification bar. But every time i tested on foreground, it fails receiving notifications more than 3 times. Also, if i call method to getToken() after this, firebase returns a new token (seems like the previous one is being invalidated). I have the same behavior on Safari on macos 13.3 Ventura. I am using 9.16.0 compat version (but i assume, using modular or compat versions shouldn’t have any behavioural differences, right?)
EDIT: on Chrome and Firefox (MacOS) everything works fine, no issues there.

@andreififiita : I am also having the same issue, on chrome and mozilla firefox it works perfectly, but on safari it just receives three notifications and then stop. What I have found is, if we are not able to publish notification to the notification center, safari revokes the token and we have to follow the workflow again for getting the new token. If you watch this video (last 5-10 mins), they have explicitly mentioned that after 3 notifications they will revoke the token if notification is not published to notification center.
Video
My point is as we are using FCM (onMessage handler) and generating the notifications using the new Notification() constructor, it should go to the notification center.
What I have observed and I did get more then 3 notifications is(background use case) : if we do not do any handling for the background message in service worker file, and just service worker do the work, we get the notifications without any issue.
But for foreground(when tab is active) we have to do(onMessage handler), otherwise no message will be shown. I am working on it, will update you, if got any resolution.

Hi, i also tried creating "new Notification()" in the foreground onMessage() handler but it still failed. I believe i also tried sending a postMessage to the service worker (last test a few months ago), and still failed. So i am am not sure where exactly safari "counts 3 times". Also, from what i know, the service worker's messaging.onBackgroundMessage() won't be executed if the app is in foreground. Maybe is there a way to go around this, at least for the time being?

Hello @andreififiita : With some work around, I am able to get the notifications on safari for both foreground and background message.

Couple of observations that I have found :

1. If we ourselves handle the events like (onMessage & onBackgroundMessage), and then generate the notification using the new Notification() constructor, safari thinks that the notification is not delivered/registered to the notification center, most like a local notification. (To verify this what I have done is I have removed any handling for background message in service worker, and let service worker publish the notifications, and it was able to publish the notifications without any issue(atleast 10 I have tested, so it would likely to work).

2. Firebase internal Service worker listener file, handles the foreground and background notification differently, for foreground they use the client.postMessage() method to publish the event, and then on our side we handle it on the "OnMessage" listener, and for background message they directly use the service worker registration -> show notification method, which directly publish to the notification center.

So, my guess is safari think that when we use n = new Notification(in case of client.postMessage() or onMessage), we are not directly delivering it to the notification center. I have also tried with service worker registration -> show notification method in the onMessage call, it didn't work.

Final Workaround :

1. Remove any handling on "onMessage or onbackgroundMessage event", as it is not going to triggered with my approach.
2. In the service worker file, add a eventlistener on the push, event and do whatever parsing we need to do their, and generate the notification using self.registration.showNotification().
3. It will handle both foreground and background message.
4. The very first line of push event listener should be "event.stopImmediatePropagation();" So that it should not invoke any firebase service listener handling.

Sample code in service worker :
`self.addEventListener('push', function(event) {
event.stopImmediatePropagation();
console.log('Received a push message', event);

var title = 'Yay a message.';
var body = 'We have received a push message.';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil( self.registration.showNotification(title,{body: body,tag: tag}) );});
`

[andreififiita]

I was thinking to bypass the fcm service worker handling as well, but i didn't know i needed event.stopImmediatePropagation(). Thanks for the this info.
Also i believe this has serious architectural implications, and it will create a huge mess. Even so, even with this workaround, this seems to be disrupting the actual purpose of the push messages. For example, imagine talking with someone in a built-in chat (in your app) and while texting back and forth with another person (with the chat view open), you also receive a flood of notifications in the OS notification bar / UI. This would have a big impact on the user's experience and he might consider it spam/flood. So this means we would have something technically working, but not completely functional from a UX/UI point of view.
Please let me know if i am missing something here.

[andreififiita]

And also, i can't seem to find the FCM data in the push event. the "event.data" field seems to be empty.

EDIT:
In the meantime I found in the FCM .ts code that i need to call event.data.json() to get the data (i was just inspecting the event.data field and couldn't find anything). Maybe this information is useful for others as well.

[lincolnthree]

Does anyone have a full/working example of what they needed to do to get this working? Any official response from Firebase yet?

[utkarsh-globant]

Does anyone have a full/working example of what they needed to do to get this working? Any official response from Firebase yet?

@lincolnthree : For safari, they might have to handle the foreground message differently, currently for foreground message handling, they use the client(browser) postMessage to send a message to the client, and in client side code, the developer handle it through listening on the "onMessage" hook, and then uses the browser notification API to generate the notification..
So, I guess safari doesn't treat it as a notification delivered to the notification center, because of which it revokes the token after 3 messages.

What can be done to make that working :

1. For SAFARI user agent, they can handle it differently, instead of sending it via a client.postMessage, they can use the same approach that they are using for background messages, or identify a way which can directly deliver a message to notification center.

2. Or, directly ask developers to listen for "push" event in service worker file, and handle both foreground & background message their.

`self.addEventListener('push', function(event) {
event.stopImmediatePropagation();
console.log('Received a push message', event);

var title = 'Yay a message.';
var body = 'We have received a push message.';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil( self.registration.showNotification(title,{body: body,tag: tag}) );});
`

[andreififiita]

Does anyone have a full/working example of what they needed to do to get this working? Any official response from Firebase yet?

@lincolnthree : For safari, they might have to handle the foreground message differently, currently for foreground message handling, they use the client(browser) postMessage to send a message to the client, and in client side code, the developer handle it through listening on the "onMessage" hook, and then uses the browser notification API to generate the notification.. So, I guess safari doesn't treat it as a notification delivered to the notification center, because of which it revokes the token after 3 messages.

What can be done to make that working :

1. For SAFARI user agent, they can handle it differently, instead of sending it via a client.postMessage, they can use the same approach that they are using for background messages, or identify a way which can directly deliver a message to notification center.
2. Or, directly ask developers to listen for "push" event in service worker file, and handle both foreground & background message their.

`self.addEventListener('push', function(event) { event.stopImmediatePropagation(); console.log('Received a push message', event);

var title = 'Yay a message.'; var body = 'We have received a push message.'; var tag = 'simple-push-demo-notification-tag'; event.waitUntil( self.registration.showNotification(title,{body: body,tag: tag}) );}); `

I confirm this workaround worked for me. The caveat is that, when in foreground, i am obliged to show notifications in the OS notification bar all the time, even though use has the respective UI context which contains the data from the notification (a view or an activity or a popup or a page, according to your app's business logic) right in their face.

[petlys]

Does anyone know if messages composed/sent using the Firebase console works with Safari and the above solution listening in on the push event? Message is received on Chrome but not on Safari.

EDIT: After testing sending a notification with the Java SDK, I get Invalid registration token when sending to a FCM token generated on Safari. For those of you who have gotten this to work, how are you generating/sending your notifications?

[shawol1912]

It's working well in Safari 16.5 but a note:

The notification prompt can only be triggered by a user gesture on some browsers so you should wait for a user gesture (e.g. a click on a button) and then display the permission prompt from that event

<button @click="requestPermission()">Request Permision

requestPermission() {
  try {
    Notification.requestPermission().then((permission) => {
    if (permission === "granted") {
      console.log("Notification permission granted.");
    } else {
      console.log("Do not have permission!");
    }
  });
  } catch (e) {
    console.error("Error : ", e);
  }
}

[risalfajar]

They have supported it starting from Safari 16.1
Blog post

[andreififiita]

Hi, is anyone else experiencing issues with firebase messaging on safari 17.4? It seems firebase requests to https://fcmregistrations.googleapis.com/ are failing with 400 Bad Request. I tested so far in in Safari 17.4.1 MacOS Ventura 13.6.6 (22G630). I am using firebase 10.10.0:
importScripts('https://www.gstatic.com/firebasejs/10.10.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.10.0/firebase-messaging-compat.js');

Specifically, requests to "https://fcmregistrations.googleapis.com/v1/projects/.../registrations/" seem to have missing data in the payload:
{"web":{"endpoint":"","auth":"","p256dh":"","applicationPubKey": "......LMbu5N....."}};
For example, in Chrome, the endpoint, p256dh and auth properties have non-empty values (something similar to values: "https://fcm.googleapis.com/fcm/send/dKxAeok......", "BFDONgo....", and "2stao....." respectively)

Everything works well on chrome and firefox, latest versions. If someone managed to find a solution for this, please let me know.

[andreififiita]

Does anyone have a working app online where firebase messaging actually works in Safari 17.4 or 17.5 (macos or ios)?

[andynewman10]

@andreififiita I also use Safari 17.5 on macOS Ventura and observe something similar. Did you find a solution for this? I tried downgrading firebase-js-sdk but it produces the same results.

Not having firebase messaging running on Safari is a huge limitation.

[andreififiita]

@andreififiita I also use Safari 17.5 on macOS Ventura and observe something similar. Did you find a solution for this? I tried downgrading firebase-js-sdk but it produces the same results.

Not having firebase messaging running on Safari is a huge limitation.

I did not find a solution yet. What is interesting is that nobody else seem to comment on this a lot (i see almost no feedback anywhere, if it either works or not for them). I posted on stackoverflow also: https://stackoverflow.com/questions/78323312/firebase-cloud-messaging-web-issues-in-safari-17-4

[ljvanschie]

Just to confirm, we are also waiting for Firebase to fix this.

Push notifications on iOS work, but only once and then the subscription gets removed. So we currently disable push notification in our web app for iOS until this is fixed.

[andynewman10]

@ljvanschie can you confirm that you do manage to get things working on Safari 16.4+ or 17?

Just to confirm, for you, messaging works (all the time), only notifications are no longer received after a while, right?

[ljvanschie]

We've tested on several Safari versions but in none of them it worked without issues.

I don't see a difference between messaging or notifications, we only use Firebase for web push notifications. These get sent the first time and appear correctly, but the registration gets removed so after receiving one, users need to register their device again (which is of course not a working solution).

[andynewman10]

We've tested on several Safari versions but in none of them it worked without issues.

I don't see a difference between messaging or notifications,

Thanks for the clarification. By notification vs. plain messages, I meant

• notifications create a UI popup on the client side. They have a notification field in the payload
• regular messages do not create a UI popup on the client side. No notification filed in the payload.

Do you observe the same behavior (i.e. client getting somehow "unregistered") with both types of messages?

we only use Firebase for web push notifications. These get sent the first time and appear correctly, but the registration gets removed so after receiving one, users need to register their device again (which is of course not a working solution).

Not ideal, but doesn't re-registering after receiving every single message work? (why wouldn't it work?)

[andynewman10]

Both @andreififiita and I seem to be using macOS Ventura (and Safari 17.4+).

To all people subscribed to this issue: which macOS version are you using? Are you guys using macOS Sonoma? This could explain why only some of us experience problems with getToken.

[ariel-bentu]

I have experienced the following:

• after user gesture, I request a token with getToekn, and it works.
• fcm (using firebase-admin's admin.messaging().send(...) works, and notification are received to my iPhone PWA.
• this can work many times, until... I close the PWA (swipe it up). once I relaunch, the token is no longer registered with fcm, and when I try to send a notification from the server to that previously obtained token, I get an error from fcm that it is "unregistered".

I found that the firebase code is calling getToken when functions are initialized.
in .../node_modules/@firebase/functions/dist/index.esm2017.js, line 370 (in version 10.12.3):

async getContext(limitedUseAppCheckTokens) {
        const authToken = await this.getAuthToken();
        const messagingToken = await this.getMessagingToken();
        const appCheckToken = await this.getAppCheckToken(limitedUseAppCheckTokens);
        return { authToken, messagingToken, appCheckToken };
    }

This in some cases cause the following call:
DELETE https://fcmregistrations.googleapis.com/v1/projects/<myproj>/registrations/cW9q7jQoHGm9DzfIvN8wGi:APA91b... 404 (Not Found)

Then looking at the code I see that it is called when the token fetched is not valid. since the token is called as a side effect of getContext, no vapidKey is used, and the token probably does not match.

So, as a workaround, I added as the first thing after initializing the app:

    const messaging = getMessaging(app);
    messaging.vapidKey = 'BFMK8m...';

Now it seems to fine.
[EDIT 30-Nov-25]: if you register your own service-worker, you must set the scope to be "/firebase-messaging-sw.js". otherwise on the next reload, firebase sees mismatch scopes and recreate the token.

    const messaging = getMessaging(app);
    messaging.vapidKey = 'BFMK8m...';
    navigator.serviceWorker.register("my-service-worker.js", { scope: "<your-server>/firebase-messaging-sw.js"})
    .then (swReg=>{
       messaging.swRegistration = swReg;
     });

[EDIT]:
Some more insights, after trying to make the user experience clean:

• if you ever call getToken not from user gesture, Safari will render the token unusable anymore.
• I did not find a way to verify in a certain device. Currently I found only close-enough check:

  const permission = Notification && Notification.permission;
  if (permission === "granted") {
    // here I also check if I have tokens persisted in my server, and if exist, I assume token exists
  }

in addition, here is my service-worker's code. I used postMessage to my site if notification is clicked:

self.addEventListener('push', function (event) {
    event.stopImmediatePropagation();
    console.log('[Service Worker] Push Received.');
    const payload = event.data.json();  
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        ...payload.notification,
        data: {
            ...payload.data,
            click_url: payload.notification.click_action,
        }
    };
    event.waitUntil(
        self.registration.showNotification(notificationTitle, notificationOptions)
    );
});

self.addEventListener('notificationclick', function (event) {
    event.preventDefault();
    console.log('Notification click Received.', event.notification.data);

    event.notification.close();

    event.waitUntil(
        clients.matchAll({ type: 'window', includeUncontrolled: true }).then(function (clientList) {
            // Check if there is already a window/tab open with the target URL
            for (let i = 0; i < clientList.length; i++) {
                let client = clientList[i];
                if (client.url.startsWith(event.notification.data.click_url) && client.focus) {
                    client.focus();
                    client.postMessage(event.notification.data);
                    return;
                }
            }
            // If not, then open a new window/tab with the target URL
            if (clients.openWindow) {
                clients.openWindow(event.notification.data.click_url).then((windowClient) => {
                    windowClient.postMessage(event.notification.data);
                });
            }
        })
    );

});

and in my site's code:
navigator.serviceWorker?.addEventListener("message", (payload)=>{ ... });

[lincolnthree]

Honestly I've just been waiting, watching this thread until someone says they got it working without issues, because I don't have extra hours to try to figure this out :(

[meerbahadin]

still, almost 2025 not working correctly in safari (ios).

[firstcomeuropeag]

same here

[hsubox76]

I'm going to close this thread, not because there aren't any FCM bugs with Safari, but the opposite - and we should have specific issues threads for each specific FCM/Safari issue.

The initial post is that FCM should officially support Safari as of the release of Safari 16 and Safari push notifications, and it is now officially listed as supported, so that feature request is outdated. The problem, of course, is there are still many issues and many people cannot get it to work.

Here's a known issues page that covers several of the issues (especially with Safari-based PWAs):
https://github.com/firebase/firebase-js-sdk/wiki/Known-Issues

Quick quote of that page as of now:

FCM in iOS Progressive Web Apps (PWAs)

There are several known issues with notifications in iOS PWAs that are believed to be caused by WebKit bugs.

• Device restarts cause push event listeners to not trigger until the PWA is opened again (#8444).
• The WebKit bug related to notificationClick events in service workers not firing (Bugzilla) is believed to be the cause of a series of issues that we have not been able to reproduce. If you discover any other potential causes, please provide as much information as possible about them in the relevant bugs.
  • Unexpected unregistration from notification subscription (#8010)
  • onBackgroundMessage triggering in the foreground (#8002)
  • Notification click opens the app the the incorrect URL (#7698)
  • Service worker event listeners don’t work if the app is opened from the home screen (#7309)

Safari Push Manager Subscriptions

pushManager.subscribe resolves with an empty subscription payload (#8356). This issue has been reproduced on WebKit versions 19620.1.2 and 18618.3.11.11.7, but not in 18618.3.11.11.5 (latest Safari 17.6).

If you have one of those issues, you can go to those issue links and read/post there. If you have an issue that isn't on that page, and can't be found by searching the issues here, create a new issue with the specific issue you are seeing and as much info as possible.

[comewithl]

这是来自洪俊贤的自动回复邮件。