Why are notifications not grouped by tag on iOS/Safari v16.3?

we carried out push notifications for a PWA utilizing this information: https://internet.dev/notifications/

We’re utilizing the tag property to group notifications collectively. For instance, if there’s one reply, the person might be proven “you’ve got a brand new reply”. But when there’s one other, it ought to present “you’ve got 2 new replies” and exchange the earlier one.

That is the related code in our service employee:

self.addEventListener('push', async perform (occasion) {
  const payload = occasion.information?.json()
  if (!payload) return
  const { tag } = payload.choices
  occasion.waitUntil((async () => {
    if (!['REPLY', 'MENTION'].consists of(tag)) {
      // notifications with REPLY and MENTION as tags want up to date title.
      // different notifications can simply exchange the previous one
      return self.registration.showNotification(payload.title, payload.choices)
    }

    const notifications = await self.registration.getNotifications({ tag })
    // since we used a tag filter, there ought to solely be zero or one notification
    if (notifications.size > 1) {
      console.error(`a couple of notification with tag ${tag} discovered`)
      return null
    }
    if (notifications.size === 0) {
      return self.registration.showNotification(payload.title, payload.choices)
    }
    const currentNotification = notifications[0]
    const quantity = currentNotification.information?.quantity ? currentNotification.information.quantity + 1 : 2
    let title=""
    if (tag === 'REPLY') {
      title = `You could have ${quantity} new replies`
    } else if (tag === 'MENTION') {
      title = `You had been talked about ${quantity} instances`
    }
    currentNotification.shut()
    const { icon } = currentNotification
    return self.registration.showNotification(title, { icon, tag, information: { url: '/notifications', quantity } })
  })())
})

A notification that we ship to the push service could seem like this:

{
  "title": "you've got a brand new reply",
  "choices": {
    "physique": <textual content of reply>,
    "timestamp": <unix timestamp>,
    "icon": "/android-chrome-96x96.png",
    "tag": "REPLY",
    "information": { "url": "/gadgets/124101" },
  }
}

This works on Android however for some cause doesn’t on iOS 16.4 with Safari. Notifications by no means get changed. So if a person will get 3 replies, they get three “you’ve got a brand new reply” notification. I checked the browser compatibility for varied associated options however I could not discover a cause why it should not work.

Instance:

I additionally regarded by way of the specification for the Notification API and it clearly says that notifications with the identical tag ought to get changed:

6.3 Run the present steps for notification

— https://notifications.spec.whatwg.org/#dom-serviceworkerregistration-shownotification

Let oldNotification be the notification within the checklist of notifications whose tag just isn’t the empty string and is notification’s tag, and whose origin is similar origin with notification’s origin, if any, and null in any other case.

If oldNotification is non-null, then:

Deal with shut occasions with oldNotification.

If the notification platform helps substitute, then:

Exchange oldNotification with notification, within the checklist of notifications.

— https://notifications.spec.whatwg.org/#show-steps

Since help for these options was solely added not too long ago (in 16.4 which shipped on 2023-03-27), I did not discover helpful sources on the internet about this. Largely about folks asking when help will come.

Since I’ve no entry to a Apple machine, I cannot debug this correctly.

As talked about, I regarded by way of the specification and browser compatibility and could not discover a cause why this code doesn’t work on iOS however works on Android.

We’d be very completely satisfied if somebody may help us with this.