[Webkit-unassigned] [Bug 258922] New: Push notifications with same tag do not replace each other on iOS 16.4

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Thu Jul 6 05:54:48 PDT 2023


https://bugs.webkit.org/show_bug.cgi?id=258922

            Bug ID: 258922
           Summary: Push notifications with same tag do not replace each
                    other on iOS 16.4
           Product: WebKit
           Version: Safari 16
          Hardware: Unspecified
                OS: iOS 16
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Service Workers
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ek at stacker.news

Hello!

I asked a question on Stack Overflow about this since I wasn't sure if I am doing something wrong. Someone replied that this may indeed be a bug and I should file a bug report with Apple or you. Since I didn't find another bug report about this on here, I am filing this one now. I didn't file a bug report with Apple since I have no Apple developer license. It looks like I need one or an Apple device before I can file a bug. [0]

What follows is the body of the question [1] + some changes to respect the Bug Writing Guidelines

---

**Overview**

We implemented push notifications for a PWA using this guide: https://web.dev/notifications/

We are using the `tag` property to group notifications together. For example, if there is one reply, the user will be shown "you have a new reply". But if there is another, it should show "you have 2 new replies" and replace the previous one.

However, this works on Android but not on iOS 16.4 with Safari. Notifications always show up immediately and do not replace each other even though they have the same exact tag.

This is the relevant code in our service worker:

```javascript
self.addEventListener('push', async function (event) {
  const payload = event.data?.json()
  if (!payload) return
  const { tag } = payload.options
  event.waitUntil((async () => {
    if (!['REPLY', 'MENTION'].includes(tag)) {
      // notifications with REPLY and MENTION as tags need updated title.
      // other notifications can just replace the old one
      return self.registration.showNotification(payload.title, payload.options)
    }

    const notifications = await self.registration.getNotifications({ tag })
    // since we used a tag filter, there should only be zero or one notification
    if (notifications.length > 1) {
      console.error(`more than one notification with tag ${tag} found`)
      return null
    }
    if (notifications.length === 0) {
      return self.registration.showNotification(payload.title, payload.options)
    }
    const currentNotification = notifications[0]
    const amount = currentNotification.data?.amount ? currentNotification.data.amount + 1 : 2
    let title = ''
    if (tag === 'REPLY') {
      title = `You have ${amount} new replies`
    } else if (tag === 'MENTION') {
      title = `You were mentioned ${amount} times`
    }
    currentNotification.close()
    const { icon } = currentNotification
    return self.registration.showNotification(title, { icon, tag, data: { url: '/notifications', amount } })
  })())
})
```

A notification that we send to the push service may look like this:

```json
{
  "title": "you have a new reply",
  "options": {
    "body": <text of reply>,
    "timestamp": <unix timestamp>,
    "icon": "/android-chrome-96x96.png",
    "tag": "REPLY",
    "data": { "url": "/items/124101" },
  }
}
```

This works on Android but for some reason does not on iOS 16.4 with Safari. Notifications never get replaced. So if a user gets 3 replies, they get three "you have a new reply" notification. I checked the browser compatibility for various related APIs but I couldn't find a reason why it shouldn't work (see reference).

**Steps to Reproduce**

Since I don't have access to an Apple device running iOS 16.4, I can't easily provide steps for reproduction at the moment. However, I think the following minimal service worker code should already show the bug:

```javascript
self.addEventListener('push', async function(event) {
  eventWaitUntil(self.registration.showNotification("tag test", { "tag": "TAG" })
}
```

This code above should always show a notification with the title "tag test" if a push message was received. If a new push message is received, it should replace the previous one.

**Actual Results**

Notifications with same tag show up individually

**Expected Results**

Notifications with same tag automatically replace each other according to the specs [2]

**Build Date & Hardware**

Build ??? on iOS 16.4

**Additional information**

I have looked through Mozilla MDN to check for browser compatibility for relevant APIs [3-7]. I haven't found a reason why this shouldn't work on iOS 16.4.

Since support for these features was only added recently (in 16.4 which shipped on 2023-03-27), I didn't find useful resources on the web about this. Mostly about people asking when support will come.

Since I have no access to a Apple device, I can not debug this properly.

We would be very happy if someone can help us with this.

---

Reference:

[0] https://developer.apple.com/bug-reporting/
[1] https://stackoverflow.com/q/76625248/13555687
[2] https://notifications.spec.whatwg.org/#show-steps
[3] https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification#browser_compatibility
[4] https://developer.mozilla.org/en-US/docs/Web/API/Notification/tag#browser_compatibility
[5] https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/getNotifications#browser_compatibility
[6] https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#browser_compatibility
[7] https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API#browser_compatibility

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230706/4ed4e64c/attachment.htm>


More information about the webkit-unassigned mailing list