Try to handle iOS stacked notifications

web/public/notifications-worker.js

@@ -19,11 +19,7 @@ self.addEventListener("push", function (event) {
         break;
     }
 
-    // event.waitUntil is required on iOS Safari — without it, the browser
+    const notificationOptions = {
-    // may consider this a "silent push" and revoke the subscription after 3 occurrences.
-    event.waitUntil(
-      // @ts-expect-error we know this exists
-      self.registration.showNotification(data.title, {
       body: data.message,
       icon: "/images/maskable-icon.png",
       image: data.image,
@@ -31,7 +27,32 @@ self.addEventListener("push", function (event) {
       tag: data.id,
       data: { id: data.id, link: data.direct_url },
       actions,
-      }), // eslint-disable-line comma-dangle
+    };
+
+    // iOS Safari does not auto-coalesce notifications by tag (WebKit bug #258922).
+    // On iOS 18.3+ close() works, so we manually close duplicates before showing.
+    // On other platforms, tag-based replacement works natively — skip the extra work.
+    const isIOS =
+      /iPad|iPhone|iPod/.test(navigator.userAgent) && !self.MSStream;
+
+    const show = () =>
+      // @ts-expect-error we know this exists
+      self.registration.showNotification(data.title, notificationOptions);
+
+    // event.waitUntil is required on iOS Safari — without it, the browser
+    // may consider this a "silent push" and revoke the subscription after 3 occurrences.
+    event.waitUntil(
+      isIOS
+        ? // @ts-expect-error we know this exists
+          self.registration
+            .getNotifications({ tag: data.id })
+            .then((existing) => {
+              for (const n of existing) {
+                n.close();
+              }
+            })
+            .then(show)
+        : show(), // eslint-disable-line comma-dangle
     );
   } else {
     // pass