Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove Safari's support for tag and icon properties in the Notifications API #24537

Merged
merged 3 commits into from
Oct 2, 2024

Conversation

captainbrosset
Copy link
Contributor

@captainbrosset captainbrosset commented Sep 26, 2024

Summary

Although Safari supports the tag and icon properties in the Notifications API, setting them doesn't do anything.

The icon property is supposed to allow developers to set an icon to be displayed in the system notification, replacing the default browser icon. But Safari doesn't actually display the icon.

The tag property is supposed to allow developers to avoid displaying too many notifications in a short amount of time. When developers use the same tag value, then new notifications replace old ones that haven't yet been displayed.
Safari doesn't seem to use tags, and sending bursts of same-tag notifications does still lead to multiple notifications being displayed to the user (although not all of them, but the logic seems UA-controlled, as opposed to based on the tag).

This PR therefore marks those 2 properties as not supported by Safari, with a note.

Test results and supporting details

Test page: https://patrickbrosset.com/lab/2024-09-26-notifications-with-icon-and-tag/

Here is a screenshot showing what notifications look like on Safari, even when an icon is specified:
Capture d’écran 2024-09-26 à 10 36 23

And the same test, in Edge:
image

It's harder to show screenshots for the lack of tag support, but this webkit bug confirms it: https://webkit.org/b/258922
Especially this comment:

To be clear: the tag attribute on Notification is exposed. You can set it via the Notification constructor/ServiceWorkerRegistration.showNotification and access its value later on. But the browser currently doesn't use the property to coalesce notifications. That will require additional work.

@github-actions github-actions bot added the data:api Compat data for Web APIs. https://developer.mozilla.org/docs/Web/API label Sep 26, 2024
@rejhgadellaa
Copy link

rejhgadellaa commented Sep 26, 2024

image

This shows that tag and icon is not working:

In the screenshots above, notice how on Android (left), there is one notification for each chatroom (two in total), which can be updated to include new messages. Each notification shows the profile picture of the sender. On the iPhone (right), instead of updating the existing notification, it creates a new one for each push message. They all have the same icon. Messages from Chatroom #1 are mixed with #2. None of these can be closed automatically by the web app, except the ones you tap.

https://webventures.rejh.nl/blog/2024/web-push-ios-one-year/#anchor--real-world-example

Btw, it also shows that badge isn't working either, but it is listed as supported on https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API#browser_compatibility

Oh and thank you @captainbrosset !

@rejhgadellaa
Copy link

Ah, almost forgot. Related: #19318

@captainbrosset captainbrosset requested a review from caugner October 2, 2024 12:50
@caugner caugner merged commit 28f6e13 into mdn:main Oct 2, 2024
6 checks passed
@captainbrosset captainbrosset deleted the safari-notif branch October 2, 2024 13:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
data:api Compat data for Web APIs. https://developer.mozilla.org/docs/Web/API
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants